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

  • 相关阅读:
    Jabref安装及使用教程
    均方误差与均方根误差
    费马大定理
    JabRef设置
    申请内存时底层发生了什么?
    什么是Pipeline?
    基于三维点云场景的语义及实例分割
    华为 MateView 系列显示器新品
    C#-WinForm跨线程修改UI界面
    C# 代码生成二维码方法及代码示例(QRCoder)
  • 原文地址:https://www.cnblogs.com/cyfeng/p/12148313.html
Copyright © 2011-2022 走看看