Javascript 如何遍历DOM以确定最大嵌套深度？_Javascript_Html_Dom

Javascript 如何遍历DOM以确定最大嵌套深度？

javascript html dom

Javascript 如何遍历DOM以确定最大嵌套深度？,javascript,html,dom,Javascript,Html,Dom,例如： // ... <body> <div> <div> </div> </div> </body> // ... /。。。 // ... 这个巢穴的深度是3？但是更一般地说，我如何遍历DOM来找到这些信息呢我感兴趣的是将DOM视为n元树，并将其建模为对象文字，如本文所述：我个人最喜欢的是使用堆栈。继续推送标记，直到到达相应的/对称的结束标记。然后你可以弹出或做任何你想做的分析。这是Comp

例如：

// ...
<body>
  <div>
    <div>
    </div>
  </div>
</body>
// ...

/。。。
// ...

这个巢穴的深度是3？但是更一般地说，我如何遍历DOM来找到这些信息呢

我感兴趣的是将DOM视为n元树，并将其建模为对象文字，如本文所述：

我个人最喜欢的是使用堆栈。继续推送标记，直到到达相应的/对称的结束标记。然后你可以弹出或做任何你想做的分析。这是Comp Sci数据结构类中的一个经典示例

function getMaximumDepth (element) {
    var child = element.firstChild;
    var childrenDepth = [];

    if ( ! child ) {
        return 1;
    }

    while (child) {
        childrenDepth.push( getMaximumDepth(child) );
        child = child.nextSibling;
    }

    return Math.max.apply(Math, childrenDepth) + 1;
}

演示：

一个优雅的递归解决方案

在-

height（document.body）

功能高度（el）{
如果（！el.children）
返回0；
var max=-1；
对于（变量i=0；i最大值）{
max=h；
}
}
返回最大值+1；
}
<代码> > p>如果唯一的目标是确定最大嵌套级别，我会考虑使用<代码> QueRealStor < /C> >（因为它应该被很好地优化）：
（使用此SO页面标记的一部分）由于您没有搜索特定的内容或对树的某个部分应用任何算法，简单的按顺序[完整]树遍历有什么问题？没关系，我如何最好地实现它？递归是最简单的。试试看！除此之外。。。继续推/弹出并保持变量中达到的最大堆栈大小。在最后一次流行音乐之后，你有了深度+答案是1。这是DOM，而不是HTML标记。“匹配标签”不需要堆栈。你说得对，Bergi。我是从另一个角度来看它的，这是真的，但是对于计算n元树的高度来说，递归比迭代简单。另一方面，为什么n元树向下生长，但有高度而不是深度？好奇的人想知道，你在走DOM。它已经被解析成一棵树。与大多数递归解决方案一样，有一个简单/特殊的情况通常会终止递归和一般情况。简单的例子是一棵不包含子树的树：它的高度是1。一般情况（递归情况）是一棵包含1个或多个子树的树：其高度为1+其子树的最大深度（通过递归计算每个子树的高度并跟踪其最大值获得）。关于实现，请参阅@MoazzamKhan的优秀答案。我敢打赌，这比某种形式的DOM遍历要慢得多。当然，只有测试才能说明问题。@CrazyTrain，你是对的，如果DOM变得非常大，嵌套级别超过30（），它会变得更慢（与joellustigman的解决方案相比）。但是对于相对平坦的DOM，嵌套级别大约为20，在Firefox和IE11（）中似乎要快一点。@Crazy-我推荐您编写jsperf！
function height(el) {
    if (!el.children)
        return 0;
    var max = -1;
    for ( var i = 0; i < el.children.length; i++) {
        var h = height(el.children[i]);
        if (h > max) {
            max = h;
        }
    }
    return max + 1;
}

function getMaxNestLevel() {
    var i = 1, sel = '* > *'; /* html > body is always present */
    while(document.querySelector(sel)) {
        sel += ' > *';
        i++;
    }
    return i;
}