当前位置:网站首页>DOM node operation

DOM node operation

2020-11-07 17:19:36 Irving the procedural ape

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 .........

版权声明
本文为[Irving the procedural ape]所创,转载请带上原文链接,感谢