从JS遍历DOM树学算法

从简单的需求/面试题谈起

自定义一个方法去检查DOM中某个ID的元素。相似getElementById.

先推荐阅读下:

广度优先.

深度优先搜索

// HTML结构以下

<div class="wrapper">
    <section class="header">
        <div class="logo"></div>
    </section>
    <section class="main">
        <div class="sidebar">
            <ul class="menu">
                <li class='li'>
                    <a href="" id='demo'>li1-a</a>
                </li>
                <li class='li'>
                    <a href="">li2</a>
                </li>
            </ul>
        </div>
    </section>
    <section class="footer">
        <div class="copyright"></div>
    </section>
</div>
复制代码

简单画了下DOM节点(只考虑元素节点)图：

代码实现

• 深度优先, 递归实现

const cusGetElementByIdByDFS = function (parentNode, id) {
    // 深度优先, 递归实现
    if (parentNode) {
        let target = null;
        const children = Array.from(parentNode.children);
        if (parentNode.id === id) {
            return parentNode;
        }
        for (let i = 0; i < children.length; i++) {
            target = cusGetElementByIdByDFS(children[i], id);
            if (target) {
                return target;
            }
        }
    }
    return null;
}

复制代码

// 测试代码
console.log(cusGetElementByIdByDFS(document.querySelector('.wrapper') , 'demo'))
复制代码

• 深度优先, 非递归实现， 使用栈

const cusGetElementByIdByDFS2 = function (parentNode, id) {
    if (!parentNode) {
        return null;
    }
    // 深度优先, 非递归实现， 使用栈
    let stack = [];
    if (parentNode.id === id) {
        return parentNode;
    }
    for (let i = parentNode.children.length; i > 0; i--) {
        stack.push(parentNode.children[i - 1]);
    }
    while (stack.length) {
        let node = stack.pop();
        if (node.id === id) {
            return node;
        } else {
            if (node.children.length > 0) {
                stack = Array.from(node.children).concat(stack);
            }
        }
    }
}
复制代码

// 测试代码
console.log(cusGetElementByIdByDFS2(document.querySelector('.wrapper') , 'demo'))
复制代码

• 广度优先 非递归实现

const cusGetElementByIdByBFS = function (parentNode, id) {
    // 广度优先 非递归实现
    // 队列的思想: 采用出队的方式遍历节点，若是遍历到的节点有子节点，则将子节点入队
    const layer = []; // 按照顺序存放每一个层级的每一个节点
    if (parentNode) {
        // 初始化layer
        // 节点深度从父节点开始算起
        layer.push({
            node: parentNode,
            depth: 1
        });
        while (layer.length > 0) {
            const root = layer.shift(); // 出队
            if (root.node.id === id) {
                return root; // 包括对应节点和节点深度
            } else {
                if (root.node.children.length > 0) {
                    Array.from(root.node.children).forEach(node => {
                        layer.push({
                            node,
                            depth: root.depth + 1
                        })
                    })
                }
            }
        }
    }
    return null;
}
复制代码

// 测试代码
console.log(cusGetElementByIdByBFS(document.querySelector('.wrapper') , 'demo'))
复制代码

后续看细下算法书再作补充, 初次学习有勘误请指出。