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 nearest parent of a node
• If the specified node has no parent , Then return to nill

2.2 Child node

1.parentNode.childNodes //  standard 

parentNode.childNode Returns a collection of children of a specified node , 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 returns child element nodes . Although it's nonstandard , But it's supported by various browsers , So it can be used safely .

3.parentNode.firstChild

parentNode.firstChild Return to the first child node , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .

4.parentNode.lastChild

parentNode.lastChild Returns the last node , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .

5.parentNode.firstElementChild

parentNode.firstElementChild Returns the first child node , No return found null.

6.parentNode.lastElementChild

parentNode.lastElementChild Returns 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 Returns 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 Returns a sibling node on the current element , No return found null. return .........