遍历DOM树的方法

最新推荐文章于 2024-11-21 06:16:28 发布

原创最新推荐文章于 2024-11-21 06:16:28 发布 · 642 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了三种遍历DOM树的方法：一是通过回调函数，二是利用迭代器，三是使用生成器实现解耦合代码。适用于前端开发者理解和优化DOM操作。

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

第一种：
首先假设一棵简单的DOM树

<div id="subTree">
        <form>
            <input type="text" name="" value="">
        </form>
        <p>Paragraph</p>
        <span>Span</span>
    </div>

第一种遍历：回调函数

   function traverseDOM(element,callback){
            callback(element);//用回调函数处理当前节点
            element=element.firstElementChild;
            //遍历每个子树
            while(element){
                traverseDOM(element,callback);
                element=element.nextElementSibling;
            }
        }
        const subTree=document.getElementById("subTree");
        //通过traverseDOM方法，从根节点开始遍历
        traverseDOM(subTree,function (element){
            console.log(element);
        })

第二种：

 //获取DOM树的根节点
        var root = document.getElementById('subTree');
       console.log(root);//打印跟节点
        //获取根节点的孩子
        function forDOM(root1) {
            var children = root1.children;
            //遍历孩子
               for (var i = 0; i < children.length; i++) {
                var child = children[i];
                 console.log(child);
                child.children && forDOM(child);
            }
        }
        forDOM(root);

第三种：使用迭代器方式

  function * DomTraversal(element) {
           yield element;
           element=element.firstElementChild;
           while ((element)) {
               //用yield*将迭代控制转移到另一个DomTraversal生成器实例上
               yield* DomTraversal(element);
               element = element.nextElementSibling;
           }
       }
       const subTree=document.getElementById("subTree");
       for(let element of DomTraversal(subTree)){
           console.log(element);
       }

在不必要使用回调函数的情况下，使用生成器来解耦合代码