寻求更高效的HTML Body标签深层子元素遍历算法

1. 原生querySelectorAll（性能最优、代码最简洁） #

利用浏览器原生优化的选择器API，直接获取所有目标元素，无需手动处理遍历逻辑：

const allBodyElements = document.querySelectorAll('body *');
allBodyElements.forEach(element => console.log(element.tagName));

• 核心优势：浏览器底层实现优化，遍历速度远超手动递归/迭代；代码极简，可读性强。
• 匹配逻辑：body *会选中<body>下所有层级的元素节点，和原递归逻辑一致（仅处理元素，不含文本/注释节点）。

2. 迭代式深度优先遍历（避免递归栈溢出） #

递归在DOM层级极深时可能触发栈溢出，用栈模拟递归过程，稳定性更强：

function traverseDeep(target) {
    const stack = [target];
    while (stack.length > 0) {
        const currentNode = stack.pop();
        // 跳过目标节点本身，仅处理子元素（与原递归逻辑对齐）
        if (currentNode !== target) {
            console.log(currentNode.tagName);
        }
        // 倒序推入子元素，保证遍历顺序与递归完全一致
        for (let i = currentNode.children.length - 1; i >= 0; i--) {
            stack.push(currentNode.children[i]);
        }
    }
}

traverseDeep(document.querySelector('body'));

• 核心优势：无栈溢出风险，性能略优于手动递归；遍历顺序可灵活控制。

3. 迭代式广度优先遍历（按层级顺序遍历） #

如果需要按DOM层级从上到下、从左到右遍历，用队列实现广度优先：

function traverseBreadth(target) {
    const queue = [target];
    while (queue.length > 0) {
        const currentNode = queue.shift();
        if (currentNode !== target) {
            console.log(currentNode.tagName);
        }
        // 按顺序推入子元素，保证层级遍历顺序
        for (let i = 0; i < currentNode.children.length; i++) {
            queue.push(currentNode.children[i]);
        }
    }
}

traverseBreadth(document.querySelector('body'));

• 核心优势：遍历顺序清晰，适合需要按层级处理元素的场景。

• querySelectorAll：性能天花板，浏览器原生优化，速度最快。
• 迭代式遍历：比递归更稳定（无栈溢出），性能略优于手动递归。
• 递归式遍历：代码直观，但DOM层级过深时会报错，性能最差。

内容的提问来源于stack exchange，提问作者Aliayub Ali