ChildNodes VS Children

最新推荐文章于 2021-03-28 02:49:08 发布

原创最新推荐文章于 2021-03-28 02:49:08 发布 · 377 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript遍历DOM树的方法，并为每个子元素应用特定样式的技巧。通过递归函数WalkTree实现对节点children的遍历，而非childNodes，确保只针对元素节点进行操作。

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

<style>

        .bgStyle {

            float:left;

            margin:5px
5px 
5px5px;

}

    </style>

</head>

<body>

    <divid="div">

        <div>

            <p>p01</p>

            <p>p02</p>

        </div>

        <div>

            <p>p11</p>

            <p>p12</p>

        </div>

        <div>

            <p>p21</p>

            <p>p22</p>

        </div>

    </div>

</body>

<script>

    varnode1
= document.getElementById('div');

    WalkTree(node1);

    functionWalkTree(node)
 {

        if (node==
null)

            return;

        for (vari
=0;
i<
node.children.length;i++)
 {

            node.children[i].setAttribute('class','bgStyle');

            WalkTree(node.children[i]);

}

        /*for (var i = 0; i < node.childNodes.length; i++) {

            node.childNodes[i].setAttribute('class', 'bgStyle');

            WalkTree(node.childNodes[i]);

}

*/

}

</script>

对于node.childNodes[0]来说返回的是EmptyTextNode，也就是说childNodes是包括non-element 的node的例如文本，而node.children只包括元素element,所以一般用node.children

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。