DOM节点的封装

最新推荐文章于 2024-10-01 20:12:28 发布

易只千纸鹤

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量129

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46907923/article/details/123059068

版权

本文主要探讨了如何在JavaScript中封装DOM节点的操作，包括查找、遍历和操作元素节点等核心内容，旨在提升Web开发中的DOM操作效率。

摘要由CSDN通过智能技术生成

寻找所有的元素节点

   <div id="box">
        <p>A</p>
        <p id=pare>B</p>
        <p>C</p>
    </div>
    <script>
        //  寻找所有的元素节点
        var box = document.getElementById('box');
        var para = document.getElementById('para');

        //封装-一个函数,这个函数可以返回元素的所有子元素节点(兼容到IE6) ，类似children的功能
        function getChildren(node) {
            //结果数组
            var children = [];
            //遍历node这个节点的所有子节点，判断每-个子节点的nodeType属性是不是1
            //如果是1,就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }
        console.log(getChildren(box));