JS children和childNodes的区别

最新推荐文章于 2023-08-31 20:31:24 发布

小鑫先生

最新推荐文章于 2023-08-31 20:31:24 发布

阅读量1w

点赞数 8

分类专栏： javascript 文章标签： javascript html children childNodes

本文链接：https://blog.csdn.net/xx_xiaoxinxiansen/article/details/76100131

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

属性介绍

children
children：返回父元素所有的直系子节点的集合，注意，children只返回HTML元素节点，不包括文本节点和属性节点。
childNodes
childNodes：返回父元素所有的直系子节点的集合，注意，与children不同的是，childNodes会返回HTML元素节点，属性节点，文本节点。

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="test">
            我是第一个子节点（且为文本节点）
            <div>我是第二个子节点（同时是第一个HTML元素节点）</div>
            我是第三个子节点（也是子节点）
            <div>我是第四个子节点（同时也是第二个HTML元素节点）</div>

            <div>我是五个子节点（同时也是第三个HTML元素节点），但我面前有个回车（即空节点）
                <div>我是第五个子元素的一个子节点</div>
            </div>
        </div>

        <script type="text/javascript">
            var test = document.getElementById('test');
            for(var i = 0; i < test.childNodes.length; i++){
                console.log(test.childNodes[i]);
                if(i == test.childNodes.length-1){
                    console.log('test.childNodes.length: ',test.childNodes.length);
                }
            }
            for(var j = 0; j < test.children.length; j++){
                console.log(test.children[j]);
                if(j == test.children.length-1){
                    console.log('test.children.length: ',test.children.length)
                }
            }
        </script>
    </body>
</html>

以上代码是分别在控制台输出#test 的childNodes和children。

代码运行结果图如下：
这里写图片描述

可以发现，test.childNodes.length是7，其中包括两个文本节点，三个HTML元素节点和两个回车产生的节点（即控制台中显示的#test）；

有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行，空格，那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }
}

test.children.length是3，仅仅是三个HTML元素节点。这里需要注意的是children在IE中包含注释节点。

小鑫先生

关注

8
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
JS children和childNodes的区别

属性介绍children children：返回父元素所有的直系子节点的集合，注意，children只返回HTML元素节点，不包括文本节点和属性节点。childNodes childNodes：返回父元素所有的直系子节点的集合，注意，与children不同的是，childNodes会返回HTML元素节点，属性节点，文本节点。代码演示<!DOCTYPE html><html> <h
复制链接

扫一扫