JS遍历DOM 节点树的实现

2021-05-01 05:26

阅读：579

标签：tmp shu return nta const nod 深度遍历 dom 分享

本文将分享 DOM 节点树深度遍历、广度遍历代码。

假定我仅遍历 body 且其结构如下：

    class="container">
        class="left">
            class="menu">
        
        class="right">
            class="box1">
            class="box2">

深度遍历（DFS）

遍历完父节点的所有子节点的子节点的子节点...再遍历其兄弟节点。

输出：[section.container, div.left, div.menu, div.right, div.box1, div.box2]

const DFS = {
    nodes: [],
    do (root) {
        for (let i = 0;i

广度遍历（BFS）

遍历完父节点的所有兄弟节点再遍历其子节点。

输出：[section.container, div.left, div.right, div.menu, div.box1, div.box2]

const BFS = {
    nodes: [],
    do (roots) {
        var children = [];
        for (let i = 0;i ) {
            var root = roots[i];
            // 过滤 text 节点、script 节点
            if ((root.nodeType != 3) && (root.nodeName != ‘SCRIPT‘)) {
                if (root.childNodes.length) children.push(...root.childNodes);
                this.nodes.push(root);
            }
        }
        if (children.length) {
            var tmp = this.do(children);
        } else {
            return this.nodes;
        }
        return tmp;
    }
}
console.log(BFS.do(document.body.childNodes));

非递归版：

const BFS = {
    nodes: [],
    do (roots) {
        var roots = new Array(...roots);
        for (let i = 0;i

原文：呆恋小喵 https://www.jianshu.com/p/cef409b161ba

JS遍历DOM 节点树的实现

标签：tmp shu return nta const nod 深度遍历 dom 分享

原文地址：https://www.cnblogs.com/cyfeng/p/12148313.html

上一篇：php框架workerman伪静态改造详细说明

下一篇：CVE-2019-16278：Nostromo Web服务器的远程命令执行

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JS遍历DOM 节点树的实现
文章链接：http://soscw.com/index.php/essay/80718.html

亲，登录后才可以留言！

JS遍历DOM 节点树的实现

深度遍历（DFS）

广度遍历（BFS）

评论

热门文章

推荐文章

最新文章

置顶文章