Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the core DOM operations of JavaScript". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the core operations of JavaScript DOM?"

Document object Model (Document Object Model, referred to as DOM) is a standard programming interface recommended by W3C to deal with Extensible markup language (HTML or XML).

The W3C has defined a series of DOM interfaces that can change the content, structure, and style of web pages through these DOM interfaces.

1. For JavaScript, in order to enable JavaScript to operate HTML,JavaScript, it has its own dom programming interface.

2. For HTML,dom, make html form a dom tree, including documents, elements, and nodes.

Document: the entire page is a document

Elements: all tags on the page are called elements

Nodes: all the content on the page is a node. Document nodes (ducument objects), element nodes (element objects), attribute nodes (attribute objects), text nodes (text objects), comment nodes (comment objects), and line wrapping between code is also a node.

All the DOM elements we get are object.

For DOM operations, we mainly focus on the operation of elements, mainly create, add, delete, change, look up, attribute operations, event operations.

First, create

There are three main types:

1 、 [xss_clean]

Features: if the page document stream is loaded (that is, all the code has been executed), calling this sentence will cause the page to be redrawn (that is, re-create a html page for us, and everything we wrote before is gone). (rarely used)

2. InnerHTML: writing content to a DOM node will not cause the page to be completely redrawn.

3. CreateElement: it will not cause the page to be redrawn.

Efficiency comparison between innerHTML and createElement:

① innerHTML splicing efficiency test:

Function fn () {var D1 = + new Date (); var str =''; for (var I = 0; I

< 1000; i++) { document.body[xss_clean] += ''; } var d2 = +new Date(); console.log(d2 - d1); } fn(); 执行结果如下 执行速度为1600毫秒左右 ②createElement效率测试 function fn() { var d1 = +new Date(); for (var i = 0; i < 1000; i++) { var div = document.createElement('div'); div.style.width = '100px'; div.style.height = '2px'; div.style.border = '1px solid red'; document.body.appendChild(div); } var d2 = +new Date(); console.log(d2 - d1); } fn(); 执行结果如下 执行速度为十几秒 ③innerHTML数组效率测试 function fn() { var d1 = +new Date(); var array = []; for (var i = 0; i < 1000; i++) { array.push(''); } document.body[xss_clean] = array.join(''); var d2 = +new Date(); console.log(d2 - d1); } fn(); 执行结果如下 执行速度为个位数秒 结果分析： 执行效率：innerHTML数组效率 >

CreateElement efficiency > innerHTML splicing efficiency

So innerHTML is more efficient when creating multiple elements (don't concatenate strings, use array concatenation), and the structure is a little more complicated.

CreateElement () is slightly less efficient when creating multiple elements, but the structure is clear.

II. Increase

There are two main types:

1. AppendChild:node.appendChild (child) appends elements to the end

2. InsertBefore:node.insertBefore (child) is added to the front

3. Delete

RemoveChild:node.removeChild (child) deletes a child node from the parent node and returns the deleted node.

IV. Reform

Mainly modify the attributes of the dom element, the content of the dom element, attributes, the value of the form, and so on.

1. Modify element attributes: src, href, title, etc. Can be modified directly, these properties are readable and writable.

2. Modify the contents of common elements: innerText, innerHTML. (both are readable and writable)

Element.innerText: when reading, only read the contents of the tag, there will be no less text, but will not read the tags, spaces and line breaks. (non-standard)

Element [XSS _ clean]: when reading, the whole thing is read out, including the html tag, while leaving spaces and line breaks. (W3C standard, commonly used)

3. Modify the form elements: value (the contents of the form), type (the form type), disabled (whether it is used or not), etc.

4. Modify the element style: style, className. You can modify attributes directly through style. If you need to modify more attributes or to facilitate operation, it is recommended to modify className.

5. Check

Mainly get the elements of query dom

1. The API method provided by DOM: getEementById, getElementsByTagName and other ancient methods.

2. New methods provided by H5: querySelector, querySelectorAll. (advocate)

3. Use node operation to obtain elements: father (parentNode), son (children), brother (previousElementSibling, nextElementSibling). (advocate)

VI. Attribute operation

Mainly for custom attributes

1. SetAttribute: set the attribute value of dom. Element.setAttribute ('attribute', 'value'); mainly for custom attributes

2. GetAttribute: get the attribute value of dom

There are two ways to get the property value of dom: element. Property and element.getAttribute ('attribute')

Difference:

Element. Property gets the built-in property value (the attribute that comes with the element itself)

Element.getAttribute ('attribute') mainly gets custom attributes (attributes that we add ourselves).

3. RemoveAttribute: remove attributes. RemoveAttribute ('attribute')

VII. Event operation

Register the event to the element and take: event source. Event type = event handler

Onclick: left mouse button click event.

Onmouseover: triggered when the mouse passes over.

Onmouseout: triggered when the mouse leaves.

Onfocus: gets the mouse focus trigger.

Onblur: triggered by losing focus of the mouse.

Dblclick: left mouse button double-click event.

Onmousemove: mouse movement trigger.

Onmousedown: triggered when the mouse button is pressed.

Onmouseup: triggered when the pressed mouse button is released.

At this point, I believe you have a deeper understanding of "what are the core operations of JavaScript's DOM?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.