DOM node relationships

Defined

The relationships in the nodes can be described by the traditional family relationship, which is equivalent to the document tree metaphor.

Property

"NodeType, NodeName, NodeValue"

Each node has these three properties, and the node types differ, and the values for these three properties are different. For an element node, the value of NodeType is 1,nodename is always the full-size label name of the element, and the value of NodeValue is always null

<div class= "box" id= "box" ></div><script>var oBox = document.getElementById (' box '); Console.log (obox.nodetype,obox.nodename,obox.nodevalue); // 1 DIV null</script>

"ParentNode"

Each node has a ParentNode property that points to the parent node in the document tree

<div class= "box" id= "box" style = "background-color:red; height:100px; width:100px "></div><script>var oBox = document.getElementById (' box '); Console.log ( OBox.parentNode.nodeName); // BODY</script>

"ChildNodes" (compute only the first layer of child nodes)

Each node has a ChildNodes property, which holds a NodeList object.

"Supplement" NodeList

The "1" NodeList is a class array object that holds an ordered set of nodes that can be accessed through a location. The NodeList object is unique in that it actually executes the results of the query dynamically based on the DOM structure, so changes to the DOM structure can be automatically reflected in the NodeList object, either through square brackets [] or through the item () method to access the nodes stored in nodelist

<div class= "box" id= "box" style = "background-color:red; height:100px; width:100px ">    <ul class=" list ">        <li class=" in "></li>        <li class=" in "></ li>    </ul></div><script>var oBox = document.getElementById (' box '); Console.log (oBox.childNodes.length); // 3, the ie8-browser returns 1 because it does not contain a blank text node obox.removechild (OBox.childNodes.item (0)); Console.log ( OBox.childNodes.length); // 2, the ie8-browser returns 0 because it does not contain a blank text node </script>

' 2 ' can convert an NodeList object to an array object using the Array.prototype.slice.call () method

<div class= "box" id= "box" ></div><script>var oBox = document.getElementById (' box '); var arrayofnodes = Array.prototype.slice.call (obox.childnodes) Console.log ( OBox.childNodes.constructor)//NodeList () {[native code]}Console.log ( Arrayofnodes.constructor)//Array () {[native code]}</script>

[note] But error in ie8-because ie8-implements NodeList as a COM object and cannot use the Array.prototype.slice () method. Here are the compatible wording:

varOBox = document.getElementById (' box ');functionConverttoarray (nodes) {varArray =NULL; Try{Array=Array.prototype.slice.call (obox.childnodes)}Catch(ex) {array= []; varLen =nodes.length;  for(vari = 0; i < Len; i++) {Array.push (nodes[i]); }    }    returnArray;}    Console.log (Converttoarray (obox.childnodes)); 

"Children" (fully compatible, compute only the first layer of child nodes)

This property is an instance of Htmlcollection, containing only the child nodes of the element in the same or element

<div class= "box" id= "box" >    <!--  comments-    <ul class= "list" >        <li class= "in" > </li>        <li class= "in" ></li>    </ul></div><script>var oBox = document.getElementById (' box '); Console.log (oBox.children.length); // 1, under Ie8-Browser is 2, because also will include note node </script>    

"PreviousSibling, previouselementsibling"
PreviousSibling: The previous node in the same node list
Previouselementsibling: The previous element node in the same node list (ie8-browser is not supported)

"NextSibling, nextelementsibling"
NextSibling: The next node in the same node list
Nextelementsibling: The next element node in the same node list (ie8-browser is not supported)

"FirstChild, Firstelementchild"
FirstChild: The first child node in a node list
Firstelementchild: The first element in a node list child node

"LastChild, Lastelementchild"
LastChild: The last child node in the node list
Lastelementchild: The last element in the Node list child node

<! DOCTYPE html>varOtest = document.getElementById (' Test '); Console.log (oTest.previousSibling.nodeName);//#text, but returns Li under Ie8-browser because it does not contain a blank text nodeConsole.log (OTest.previousElementSibling.nodeName);//LI, but error in ie8-browserConsole.log (OTest.nextSibling.nodeName);//#text, but returns Li under Ie8-browser because it does not contain a blank text nodeConsole.log (OTest.nextElementSibling.nodeName);//LI, but error in ie8-browservarOlist = document.getElementById (' list '); Console.log (oList.firstChild.nodeName);//#text, but returns Li under Ie8-browser because it does not contain a blank text nodeConsole.log (OList.firstElementChild.nodeName);//LI, but error in ie8-browserConsole.log (OList.lastChild.nodeName);//#text, but returns Li under Ie8-browser because it does not contain a blank text nodeConsole.log (OList.lastElementChild.nodeName);//LI, but error in ie8-browser</script> </body>
"Childelementcount" (ie8-Browser not supported) (contains only the first layer of child elements)
Childelementcount returns the number of child elements (excluding text nodes and notes)
<div class= "box" id= "box" >    <ul class= "list" >        <li class= "in" ></li>        <li class= "In" ></li>    </ul></div><script>var oBox = document.getElementById (' box ' ); Console.log (obox.childelementcount); // 1</script>
"Ownerdocument"
All nodes have a ownerdocument attribute that points to the document node that represents the entire document
<div class= "box" id= "box" ></div><script>var oBox = document.getElementById (' box '); Console.log (oBox.ownerDocument.nodeName); // #document</script>
Method
"HasChildNodes ()" (Fully compatible)
The HasChildNodes () method returns True when it contains one or more nodes, which is simpler than querying the length property of the ChildNodes list
<div class= "box" id= "box" >    <ul class= "list" >        <li class= "in" ></li>    </ul> </div><script>var oBox = document.getElementById (' box '); Console.log (Obox.haschildnodes () ); // true</script>
"Contains ()" (as long as it is a descendant, not necessarily the first level child element)
The contains () method receives a parameter, which is the descendant node to detect, returns true if it is not, or false if not
Note IE and Safari do not support the Document.contains () method, only the contains () method that supports ELEMENT nodes
<div class= "box" id= "box" ></div><script>// error in IE and Safari, return true in other browsers Console.log (Document.contains (document.getElementById ("box")))</script>
"Comparedocumentpostion ()" (ie8-Browser not supported)
The Comparedocumentpostion () method determines the relationship between nodes and returns a bitmask that represents the relationship.
<div class= "box" id= "box" ></div><script>// because the document contains box, so it is 16, and before box, so 4, Add the two to thevar result = Document.comparedocumentposition (document.getElementById ("box")); Console.log (result); //  - // by bitwise AND, the description 20 is made up of 16+4, so box is included in document Console.log (Result & 16); // </script>    
DOM node relationships