关于DOM节点的深度优先和广度优先遍历

最新推荐文章于 2021-03-07 21:00:50 发布

LXY224

最新推荐文章于 2021-03-07 21:00:50 发布

阅读量1.8k

点赞数 2

分类专栏： js 文章标签： js DOM树遍历

本文链接：https://blog.csdn.net/LXY224/article/details/79823669

版权

本文探讨了HTML DOM树的两种遍历方法——深度优先和广度优先。深度优先遍历包括递归和非递归实现，广度优先遍历则通过递归和非递归（模拟队列）方式进行。文中详细解释了每种方法的执行过程，并展示了相应的运行结果。

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

HTML的树形结构如上

深度优先遍历

对于树的深度优先遍历，执行结果应该如下：

采用递归方式

 var arr=[];
    //深度优先
    function traversalDFSDOM (rootDom) {
        if(!rootDom)return;
        if(rootDom.children.length==0){
            arr.push(rootDom)//没有孩子节点，表示是个叶子节点，将节点push到数组中
            return;
        }
        arr.push(rootDom)//非孩子节点，在每次遍历它的孩子节点之前先把它push到数组中
        for(var i=0;i<rootDom.children.length;i++){
            traversalDFSDOM(rootDom.children[i])//递归调用
        }

    }

结果如下