如何在JavaScript中统计指定类嵌套元素的最大层级

需要在未知的复杂DOM结构中，查找带有指定类（.bar）的元素的最大嵌套层级，示例中的预期结果是3。

示例DOM结构：

<div class="root">
    <div class="foo"></div>
    <div class="foo">
        <div class="bar"> <!-- #1 -->
            <div class="foo"></div>
            <div class="foo"></div>
        </div>
    </div>
    <div class="foo"></div>
    <div class="foo">
        <div class="bar"> <!-- #1 -->
            <div class="foo"></div>
            <div class="foo"></div>
            <div class="foo">
                <div class="bar"> <!-- #2 -->
                    <div class="foo"></div>
                    <div class="foo"></div>
                    <div class="foo">
                        <div class="bar"> <!-- #3 --> <!-- << this is the "most nested element" -->
                            <div class="foo"></div>
                            <div class="foo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="foo"></div>
    <div class="foo">
        <div class="bar"> <!-- #1 -->
            <div class="foo"></div>
            <div class="foo"></div>
            <div class="foo"></div>
        </div>
    </div>
    <div class="bar"> <!-- #1 -->
        <div class="foo"></div>
        <div class="foo"></div>
        <div class="foo">
            <div class="bar"> <!-- #2 -->
                <div class="foo"></div>
                <div class="foo"></div>
                <div class="foo"></div>
            </div>
        </div>
    </div>
</div>

原本使用querySelectorAll('.bar')实现了递归方法，但存在两个问题：一是资源消耗大且不够优雅，二是元素移除导致层级变化时，全局变量的Math.max无法正确更新结果。现有代码如下：

let d = 0;

function my_counter(root, depth = 0) {
    //get all items
    let items = root.querySelectorAll('.bar');

    d = Math.max(d, depth);

    //for each item check
    items.forEach((item) => {
        my_counter(item, depth + 1);
    });

    return d;
}

1. 无全局变量的高效递归实现 #

通过仅遍历当前元素的直接子元素，避免重复查询整个子树的.bar元素，减少DOM操作开销；同时移除全局变量，让函数成为纯函数，支持动态场景下的重新计算。

代码实现：

function getMaxBarDepth(element, currentDepth = 0) {
    let maxDepth = currentDepth;
    // 仅筛选当前元素的直接子元素中的.bar节点
    const directBarChildren = Array.from(element.children).filter(child => child.classList.contains('bar'));
    
    for (const barChild of directBarChildren) {
        // 递归计算子.bar元素的嵌套深度
        const childDepth = getMaxBarDepth(barChild, currentDepth + 1);
        maxDepth = Math.max(maxDepth, childDepth);
    }
    
    return maxDepth;
}

2. 核心优势 #

• 低资源消耗：避免querySelectorAll对整个子树的重复查询，仅遍历直接子元素，减少DOM操作次数；
• 动态适配：每次调用都会重新计算当前DOM结构的最大深度，元素增删后能返回正确结果；
• 逻辑清晰：递归逻辑聚焦于.bar元素的层级传递，无冗余操作。

3. 使用方式 #

传入根元素即可调用：

const root = document.querySelector('.root');
console.log(getMaxBarDepth(root)); // 示例中输出3

4. 极致性能优化：提前终止遍历 #

如果需要进一步提升性能，可以在遍历过程中记录当前已找到的最大深度，当当前路径的深度不可能超过现有最大值时，提前终止该分支的遍历：

function getMaxBarDepthOptimized(element, currentDepth = 0, maxFound = 0) {
    let currentMax = Math.max(maxFound, currentDepth);
    const directBarChildren = Array.from(element.children).filter(child => child.classList.contains('bar'));
    
    for (const barChild of directBarChildren) {
        const nextDepth = currentDepth + 1;
        // 若当前路径的下一层深度无法超过现有最大值，直接跳过
        if (nextDepth <= currentMax) continue;
        const childMax = getMaxBarDepthOptimized(barChild, nextDepth, currentMax);
        currentMax = Math.max(currentMax, childMax);
    }
    
    return currentMax;
}

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