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>

优质内容筛选与推荐>>
1、Java基础--多线程--第一例
2、spring-mybatis-springMVC 整合
3、asp.net 正则 例子
4、python科普篇
5、J2SE基础夯实系列之抽象类和接口的区别(太透彻了!)


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号