DOM Node operation
1. Node Overview
The three basic properties of a node :
- Node type nodeType
- The name of the node nodeName
- Node values nodeValue
- Element nodes nodeType by 1( The main operation in actual development )
- Attribute node nodeType by 2
- Text node nodeType by 3( The text node contains text 、 Space 、 Line break, etc )
2. Node level
utilize DOM Trees can divide nodes into different hierarchical relationships , Common is Father son brother hierarchy .
2.1 Parent node
node.parentNode
- parentNode Property can return the... Of a node The last parent node
- If the specified node has no parent , Then return to nill
2.2 Child node
1.parentNode.childNodes // standard
parentNode.childNode return Containing the specified node Set of child nodes , The set is an instant update set .
notes :
- The return value contains all nodes , Include element nodes 、 Text nodes, etc
- If you just want to get the element nodes inside , It needs to be dealt with specially . So it is not recommended to use childNodes
// Just want to get the processing of the element node inside
var eg = document.querySelector('ol');
for(var i = 0;i < ol.childNodes.length;i++) {
if (ol.childNodes[i].nodeType == 1) {
// So you can pick out the element nodes
......
}
}
2.parentNode.children // Nonstandard
parentNode.children Is a read-only property , Returns all child element nodes . it Only child element nodes are returned . Although it's nonstandard , But it's supported by various browsers , So it can be used safely .
3.parentNode.firstChild
parentNode.firstChild return First child node , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
4.parentNode.lastChild
parentNode.lastChild return The last node , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
5.parentNode.firstElementChild
parentNode.firstElementChild return The first child element node , No return found null.
6.parentNode.lastElementChild
parentNode.lastElementChild return The last child element node , No return found null.
notes :5、6 Methods have compatibility issues ,ie9 The above supports .
because firstChild and lastChild Include other nodes , and firstElementChild and lastElementChild There's a compatibility issue , therefore The solution to get the first or last child element node is :
- If you want the first child element node , have access to parentNode.children[0]
- If you want the last child element node , have access to parentNode.children[parentNode.children.length-1]
2.3 Brother node
1.node.nextSibling
nextSibling return The next sibling node of the current element , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
2.node.previousSibling
previousSibling return A sibling node on the current element , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
3.node.nextElementSibling
nextElementSibling return The next sibling element node of the current element , No return found null.
4.node.previousElementSibling
previousElementSibling return A sibling element node on the current element , No return found null.
notes : Method 3、4 There are compatibility issues ,ie9 The above supports .
Solutions to compatibility problems :
function getNextElemrntSibling(element) {
var el = element;
while (el = el.nextSibling) {
// Element nodes nodeType by 1
if (el.nodeType === 1) {
return el;
}
}
return null;
}
3. Create nodes
document.createElement('tagName');
This method is created by tagName designated HTML Elements . Because these elements didn't exist , It's dynamically generated according to our needs , So this method is also called Create element nodes dynamically .
4. Add a node
1.node.appendChild(child)
This method adds a node to the... Of the specified parent node At the end of the list of child nodes , Be similar to css Inside after Pseudo elements .
2.node.insertBefore(child, Specify elements ) // Specifies that the element is parentNode.children[x]
This method adds a node to the parent node's In front of the specified child node , Be similar to css Inside before Pseudo elements .
5. Delete node
node.removeChild(child)
The method from DOM Delete a child node in the , Return the deleted node .
6. Replication node ( Clone node )
node.cloneNode()
This method returns a copy of the node that called the method .
notes :
- If the bracket parameter is Empty or false, It is Shallow copy , Clone only the replication node itself , Don't clone the child nodes inside .
- If the bracket parameter is true, Then for Deep copy , It will copy the node itself and all its children .
7. The difference between the three dynamic creation elements
- document.write()
- element.innerHTML()
- document.createElement()
difference :
- document.write() It's a content stream that writes content directly to the page , But the document flow is finished , Then it causes the page to redraw .
- element.innerHTML() It's writing content into something DOM node , It doesn't cause the page to redraw completely . It's more efficient when creating multiple elements ( Don't splice strings , Take the form of array splicing ), The structure is a little more complicated .
- document,createElement() Creating multiple elements is a little less efficient , But the structure is clearer .
summary : Different browsers ,innerHTML More efficient than createElement high .
about element.innerHTML() Use :
// 1. How to concatenate strings , This method can reduce the efficiency of creating elements , Do not use
var eg = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
eg.innerHTML += '<div> Example </div>';
}
// 2. Array form splicing
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<div></div>');
}
eg.innerHTML = arr.join(''); // join() Method is used to put all elements in an array into a string