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

  • 相关阅读:
    CSS属性中Display与Visibility的不同
    11
    【零基础学习iOS开发】【01-前言】01-开篇
    C#计算时间差。
    C++拷贝构造函数:浅拷贝与深拷贝
    C++:string操作函数
    文件输入输出(二):文件的操作
    文件输入输出(一):重定向
    Java中的StringBuffer
    C++中setiosflags()的用法
  • 原文地址:https://www.cnblogs.com/cyfeng/p/12148313.html
Copyright © 2011-2022 走看看