[JS Master Road] Dom Common node attribute compatibility detailed and application

One, each DOM node has a NodeType attribute, representing the node type, NodeType there are altogether 12 types, we can walk through the built-in node constructor to get

1Window.onload =function(){2             varstr = "<table>";3              for(varKeyinchNode) {4str + = "<tr>";5str + = "<td>" + key + "</td><td>" + node[key "+" </td> ";6str + = "</tr>";7             }8str + = "</table>";9Document.body.innerHTML =str;Ten}

Element_node	1
Attribute_node	2
Text_node	3
Cdata_section_node	4
Entity_reference_node	5
Entity_node	6
Processing_instruction_node	7
Comment_node	8
Document_node	9
Document_type_node	10
Document_fragment_node	11
Notation_node	12

Among them, the most commonly used is 1 (element node) and 3 (text node). Can be combined with childnodes to make a simple application

1Window.onload =function(){2             varOul = document.getElementById ("box");3             varCnodelist =Oul.childnodes;4              for(vari = 0, len = cnodelist.length; i < Len; i++ ){5Cnodelist[i].nodetype = = 1? Cnodelist[i].style.backgroundcolor = ' Red ': ';6             }7         }8 9<ul id= "box" >Ten<li>11111</li> One<li>22222</li> A<li>33333</li> -</ul>

In the example above, to add background color to Li, Childenodes distinguishes between element nodes and text nodes under Chrome and FF. So to add a background color to chrome and FF,

Requires NodeType = 1 to be judged as an element node in order to add background color

Second, nodename and NodeValue attributes

If it is an element, NodeName is the label name, NodeValue is null, and if it is a text node, it is naturally empty.

 1  window.onload = function   () { 2  var  Oul = document.getElementById ("box"  3  var  cnodelist = Oul.childnodes;  4  for  (va R  i = 0, len = cnodelist.length; i < Len;                I++ 5   Console.log (Cnodelist[i].nodename, cnodelist[i].nodevalue);  6  }  7} 

Each node has a ChildNodes property, which holds all the child nodes under the current node, which holds a NodeList object, and NodeList is a class array structure.

There are two ways to get the required child elements

• Array index
• Item method

1 var oul = document.getElementById ("box"); 2 var cnodelist = oul.childnodes; 3 Console.log (cnodelist[0]); 4 console.log (Cnodelist.item (0));

If this nodelist needs to use an array method, he cannot call directly and needs to be transferred to a group of methods

Console.log (Cnodelist.slice (0, 1)); If you use this, you will get an error. You should turn to the array first, and you can use the following two ways:

1  // var anode = [].slice.call (cnodelist, 0); 2 var anode = Array.prototype.slice.call (cnodelist, 0 ); 3 console.log (anode);

In IE8 and older versions, these two methods are not supported and can only be traversed using the For loop

1             Try {2                 varAnode = [];3Anode = Array.prototype.slice.call (cnodelist, 0 );4}Catch(e) {5                  for(vari = 0, len = cnodelist.length; i < Len; i++ ){6 Anode.push (Cnodelist[i]);7                 }8             }9Console.log (anode);

Four, sibling node, first child node, last child node, parent node (parentnode), child node (children)

Here one has 4 groups of properties, IE and CHROME,FF supported by the following attributes:

Firstchild,lastchild,nextsibling,previoussibling is supported under IE

Supported under Chrome and FF: firstelementchild,lastelementchild,nextelementsibling,previouselementsibling

If compatibility is required, we can use short-circuit expressions:

1Window.onload =function(){2             varAdiv = document.getElementsByTagName ("div" );3(adiv[2].previouselementsibling | | adiv[2].previoussibling). Style.color = ' Red ';4(adiv[1].nextelementsibling | | adiv[1].nextsibling). Style.color = ' green ';5(Document.body.firstElementChild | | document.body.firstChild). Style.color = ' Blue ';6(Document.body.lastElementChild | | document.body.lastChild). style.color = ' Orange ';7 }8 9<div>ghostwu1</div>Ten<div>ghostwu2</div> One<div>ghostwu3</div> A<div>ghostwu4</div>

A small application of parentnode that hides the LI element corresponding to the current a element

1Window.onload =function(){2             varAhref = document.getElementsByTagName ("a");3              for(vari = 0, len = ahref.length; i < Len; i++ ){4Ahref[i].onclick =function(){5                      This. ParentNode.style.display = ' None ';6                 }7             }8         }9 Ten<ul> One<li><a href= "javascript:;" >1111</a><a href= "javascript:" > Hidden </a></li> A<li><a href= "javascript:;" >2222</a><a href= "javascript:;" > Hide </a></li> -<li><a href= "javascript:;" >3333</a><a href= "javascript:;" > Hide </a></li> -</ul>

Small application of children, interlaced discoloration

1Window.onload =function(){2             varOdiv = Document.queryselector ("#box");3             varAP =Odiv.children;4AP =[].slice.call (AP);5Ap.foreach (function(EL, key) {6El.style.backgroundColor = (key% 2 = = 0?) ' Red ': ' Green ' );7}, This);8         }9 Ten  One<div id= "box" > A<p></p> -<p></p> -<p></p> the<p></p> -<p></p> -<p></p> -</div>

[JS Master Road] Dom Common node attribute compatibility detailed and application