码迷,mamicode.com
首页 > Web开发 > 详细

JS遍历DOM 节点树的实现

时间:2020-01-04 12:52:14      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:tmp   shu   return   nta   const   nod   深度遍历   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

JS遍历DOM 节点树的实现

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!