想要獲取子節點的數量,有幾種辦法。
childNodes
它會把空的文本節點當成節點,
<ul>
文本節點
<li>元素節點</li>
文本節點
<li>元素節點</li>
文本節點
</ul>
所以childNodes.length就是5
而另一種方法
Children
就不用擔心
它只顯示元素節點即使是非空的文字節點也不顯示。
最后,還有一種方法。
NodeType、節點類型。
nodeType=3-------------->文本節點
nodeType=1------------->元素節點
請注意子節點只算第一層的,孫子節點不在子節點的范疇內。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script type="text/javascript"> 9 window.onload=function(){ 10 var oUl=document.getElementById("ul"); 11 var span1=document.getElementById("span1"); 12 var span2=document.getElementById("span2"); 13 var span3=document.getElementById("span3"); 14 var sum=0; 15 span1.innerHTML=oUl.children.length+""; 16 span2.innerHTML=oUl.childNodes.length+""; 17 for(var i=0;i<oUl.childNodes.length;i++){ 18 if(oUl.childNodes[i].nodeType==1){ 19 sum++; 20 } 21 } 22 span3.innerHTML=sum+""; 23 24 } 25 </script> 26 </head> 27 <body> 28 <ul id="ul"> 29 <li>aaa</li> 30 <li>bbb</li> 31 ccc 32 </ul> 33 children顯示的節點數: 34 <span id="span1"></span> 35 <br/> 36 chileNodes顯示的節點數: 37 <span id="span2"></span> 38 <br/> 39 nodeType為1的節點數: 40 <span id="span3"></span> 41 <br/> 42 </body> 43 </html>