JS遍历DOM 节点树的实现

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

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

 

 

深度遍历（DFS）

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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));

非递归版：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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));