js子节点children和childnodes的用法(非原创)-优快云博客

本文介绍了三种获取HTML元素子节点数量的方法：使用childNodes属性得到所有子节点（包括空白文本节点），使用children属性仅获取元素子节点，以及遍历childNodes并通过nodeType属性筛选元素节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要获取子节点的数量，有几种办法。

childNodes

它会把空的文本节点当成节点，

<ul>

文本节点

文本节点

文本节点

</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>