js子節點children和childnodes的用法


想要獲取子節點的數量,有幾種辦法。

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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM