##JavaScript中的childNodes和children节点

最新推荐文章于 2023-08-04 08:47:36 发布

七元八角oooo

最新推荐文章于 2023-08-04 08:47:36 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/weixin_41892205/article/details/80332919

版权

1、childNodes属性是用来获取任何一个元素的所有子元素，它是包含一个元素全部子元素的数组。返回元素节点、属性节点和文本节点。

（极端情况）：html的body中什么都不写；

<body></body>

window.onload = function (){
    var oBody = document.getElementsByTagName('body')[0];
    var aChild = oBody.childNodes;
    alert(aChild.length);    //1
};

body元素默认有一个文本节点，如果在里面直接写文本，值仍为1。

如果添加两个div元素：

<body><div></div><div></div></body>

值为3，2个元素节点和一个文本节点（文本节点可以通过nodeType属性值为3确认）。

空格和换行符都会被解释为节点

<body>
     <div></div>
     <div></div>
     <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

节点数为7

利用nodeType输出body子节点的所有类型

    for(var i = 0; i < aChild.length; i++) {
        alert(aChild[i].nodeType); //3 1 3 1 3 1 3
        }

2 、children 只返回元素节点

    var oBody = document.getElementsByTagName('body')[0];
    var aChild = oBody.children;

上述childNodes属性输出为7的情况下，利用children输出为3（只包含元素节点）

3、两者的不同

childNodes：不同浏览器获取不同

IE：只获取元素节点；
非IE：获取元素节点与文本节点；
解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

children：不同浏览器都是获取元素节点。

七元八角oooo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
##JavaScript中的childNodes和children节点

1、childNodes属性是用来获取任何一个元素的所有子元素，它是包含一个元素全部子元素的数组。返回元素节点、属性节点和文本节点。（极端情况）：html的body中什么都不写；&lt;body&gt;&lt;/body&gt;window.onload = function (){ var oBody = document.getElementsByTagName('body')[0];...
复制链接

扫一扫