JavaScript DOM元素的childNodes和children的区别

最新推荐文章于 2024-05-23 21:30:20 发布

u013063153

最新推荐文章于 2024-05-23 21:30:20 发布

阅读量1.1w

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013063153/article/details/52755991

版权

JavaScript 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

对于DOM元素

children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode；

childNodes包括tag之间隐形存在的TextNode对象。

具体看一下针对children和childNodes在chrome环境下的测试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<div id="div" class="div">
 <span id="span" class="span">
 </span>
</div>
</body>
<script type="text/javascript">

    function test() {
        var o = document.getElementById("div");
        var child = o.children;
        console.log("div.children运行结果:");
        for(i = 0; i < child.length; i++){
            console.log(child[i].tagName);
        }

        console.log("");
        child = o.childNodes;
        console.log("div.childNodes运行结果:");
        for(i = 0; i < child.length; i++){
            console.log(child[i].tagName);
        }

    }

    test();

</script>
</html>

测试结果如下：

div.children运行结果:

SPAN

div.childNodes运行结果:

undefined

SPAN

undefined

上面childNodes集合的结果中有两个undefined节点，这两个就是nodeType=3的TextNode。

如果把HTML代码写成如下样式，那么children和childNodes的结果就没有差别了。

<div id="div" class="div"><span id="span" class="span"></span></div>

u013063153

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM元素的childNodes和children的区别

对于DOM元素children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode；childNodes包括tag之间隐形存在的TextNode对象。具体看一下针对children和childNodes在chrome环境下的测试：html>html>head> meta charset="UTF-8"> title
复制链接

扫一扫

专栏目录