DOM node operation

DOM Node operation

1. Node Overview

The three basic properties of a node ：

1. Node type nodeType
2. The name of the node nodeName
3. 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

1. document.write()
2. element.innerHTML()
3. document.createElement()

difference ：

1. 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 .
2. 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 .
3. 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