JavaScript 遍历DOM树

1. 前序遍历

function preOrder(node){
    if(node){
        arr.push(node);
        preOrder(node.firstElementChild);
        preOrder(node.lastElementChild);
    }
}

2. 中序遍历

function inOrder(node){
    if(node){
        inOrder(node.firstElementChild);
        arr.push(node);
        inOrder(node.lastElementChild);
    }
}

3. 后序遍历

function postOrder(node){
    if(node){
        postOrder(node.firstElementChild);
        postOrder(node.lastElementChild);
        arr.push(node);
    }
}

4. 广度优先遍历

// 递归版本

function bfs(root){
    const nodes = Array.isArray(root) ? root : [root];
    const nextNodes = [];
    // 广度优先
    nodes.forEach(node => {
        if (node.children && node.children.length) {
            Array.prototype.slice.call(node.children).forEach(ele => {
                console.log(ele.className);
                nextNodes.push(ele);
            });
        }
    });
    if (nextNodes.length) {
        bfs(nextNodes);
    }
}

// 非递归版本
function bfs(root) { // 传参为根节点
    let nodes = Array.prototype.slice.call(root.children);

    while(nodes.length) {
        let tmp = [];
        nodes.forEach(function (node) {
            console.log(node.className);
            if (node.children.length) {
                tmp = tmp.concat(Array.prototype.slice.call(node.children));
            }
        });
        nodes = tmp.slice(0);
    }
}

5. 深度优先遍历

function dfs(root) {
    console.log(root.className);
    const nodes = Array.prototype.slice.call(root.children);
    if (nodes.length) {
        nodes.forEach(function (node) {
            dfs(node);
        });
    }
}