JavaScript's dom_ get and manipulate hierarchy nodes

I. Overview of Hierarchical nodes

The hierarchy of nodes can be divided into two types: parent node and child node, sibling node. When we get one of the element nodes, we can use the Hierarchy node property to get the nodes of its related hierarchy.

　　

Second, ChildNodes properties

　　The Childenodes property can get all child nodes of an element node that contains the element child nodes and the text child nodes.

<script type= "Text/javascript" >window.onload=function(){        varbox = document.getElementById (' box '); alert (box.childnodes);//[Object NodeList] Returns an array with the list of all child nodes of the current element nodealert (box.childNodes.length);//3 Getting the number of child nodes        //3 Sub-nodes: Test div<em> tilt </em> end        //The first child node is: Test div, called text node        //The second child node is:<em> inclined </em>, called the element node        //The third child node is: end, called the text nodeAlert (box.childnodes[0]);//The result is: [Object text] represents a text node objectalert (Box.childnodes[0].nodetype);//The result is: 3 represents the text nodealert (Box.childnodes[0].nodevalue);//gets the text content of the text nodealert (box.childnodes[0].innerhtml);//The text itself is now, and can no longer get the text inside, so it's undefined.alert (box.childnodes[0].nodename);//#text text node does not have a label signature             }</script>
To get different output by judging the node type
<script type= "Text/javascript" >window.onload=function () {                                 varbox = document.getElementById (' box ');  for(vari = 0; i < box.childNodes.length; i + +) {                        if(Box.childnodes[i].nodetype = = 1) {//The judgment is the element node, the output element tag nameAlert (' element node: ' +box.childnodes[i].nodename); } Else if(Box.childnodes[i].nodetype = = 3) {//The judgment is the text node, the output text contentAlert (' Text node: ' +box.childnodes[i].nodevalue); }        }    };</script>
You cannot use the InnerHTML property to output text content when you get to a text node. This non-standard attribute must be acquired at the time of the element node in order to output the text contained within
<script type= "Text/javascript" >window.onload=function () {                                 varPox = document.getElementById (' pox '));        alert (pox); //pox.innerhtml= ' Test <strong>Pox</strong> ';Pox.nodevalue = ' Test pox ';//no error, but no assignment succeeded        //pox.childnodes[0].nodevalue = ' Test pox ';Pox.childnodes[0].nodevalue = ' Test <strong>Pox</strong> '; }</script>
Third,FirstChild and LastChild Properties
FirstChild is used to get the first child node of the current element node, which is equivalent to childnodes[0]
LastChild is used to get the last child node of the current element node, equivalent to Childnodes[box.childnodes.length-1]
<script type= "Text/javascript" >window.onload=function () {                                 varbox = document.getElementById (' box '); Alert (box.childnodes[0].nodevalue);//get first child nodealert (Box.childnodes[box.childnodes.length-1].nodevalue);//get last child node                //the above method is more annoying can use the following amount methodalert (Box.firstChild.nodeValue);//get first child nodealert (Box.lastChild.nodeValue);//get last child node            }</script>
Iv.. Ownerdocument Properties
The Ownerdocument property returns the root node of the document object for that node, and the returned object is equivalent to documents.
<script type= "Text/javascript" >window.onload=function () {                                 varbox = document.getElementById (' box ');        alert (box.ownerdocument); //[Object htmldocument]//with node Document Objectalert (box.document);//Ibid .Alert (box.ownerdocument = = = document);//true, the root nodealert (box.ownerDocument.nodeName);//#documentalert (Box.ownerDocument.nodeType);//the type returned is 9    }</script>
V. ParentNode, previoussibling, nextSibling properties
The ParentNode property returns the parent node of the node
The PreviousSibling property returns the previous sibling node of the node
The NextSibling property returns the next sibling node of the node.
<script type= "Text/javascript" >window.onload=function () {                                 varbox = document.getElementById (' box ');         alert (box.parentNode.nodeName); //gets the parent node's label name result is bodyalert (box.lastChild.previousSibling);//gets the previous sibling node that is the last node (i.e. (end) of the previous node (<em> tilt </em>) is an element node)alert (box.firstChild.nextSibling);//Gets the next node (that is, the Test div) of this node (<em> tilt </em>) is an element node)alert (box.firstChild.nextSibling.nodeName);//The result is EM .    }</script>
Vi.. Attributes Properties
The Attributes property returns a collection of attribute nodes for the node.
<script type= "Text/javascript" >window.onload=function () {                                 varbox = document.getElementById (' box ');                        alert (box.attributes); //NamedNodeMap also holds the list of attribute nodes in a collection of collection arraysalert (box.attributes.length);//number of attribute nodesAlert (box.attributes[0]);//[Object Attr] The last attribute Node object 0 represents the last one that was searched from the back forward.alert (Box.attributes[0].nodetype);//2, node typealert (Box.attributes[0].nodevalue);//property value of the last propertyalert (box.attributes[0].nodename);//property name of the last propertyAlert (box.attributes[' title ');//[Object Attr], returns the node with the property titleAlert (box.attributes[' title '].nodevalue); Alert (Box.attributes.getNamedItem (' title ');//Ibid .    }</script>
JavaScript's dom_ get and manipulate hierarchy nodes