zoukankan      html  css  js  c++  java
  • JS遍历DOM 节点树的实现

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

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

    <body>
        <section class="container">
            <div class="left">
                <div class="menu"></div>
            </div>
            <div class="right">
                <div class="box1"></div>
                <div class="box2"></div>
            </div>
        </section>
    </body>

    深度遍历(DFS)

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

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

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

    广度遍历(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 < roots.length;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 < roots.length;i++) {
                var root = roots[i];
                // 过滤 text 节点、script 节点
                if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
                    if (root.childNodes.length) roots.push(...root.childNodes);
                    this.nodes.push(root);
                }
            }
            return this.nodes;
        }
    }
    console.log(BFS.do(document.body.childNodes));

     

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

  • 相关阅读:
    jquery源码 DOM加载
    用 Vue 全家桶二次开发 V2EX 社区
    java中初始化对象变量的方法
    跟我一起学extjs5(08--自己定义菜单1)
    NYOJ 57 6174问题
    Android 手动按power键上锁,没有锁屏提示音,无法恢复【单机必现】
    说好的加班呢
    排序总结之高速排序
    【c语言】模拟实现库函数的atof函数
    Oracle存储过程update受外键约束的主键值时完整性冲突解决方式
  • 原文地址:https://www.cnblogs.com/cyfeng/p/12148313.html
Copyright © 2011-2022 走看看