Question

例如：

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

这个巢深度是3？但更一般地说，我如何遍历DOM以查找此信息？

我有兴趣将DOM视为一个n-ary树，将其建模为对象文字，如本文所述：

n-ary tree in JavaScript

Answer 1

优雅的递归解决方案

将此功能用作 - height(document.body)

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;
}

Answer 2

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;
}

演示：http://jsfiddle.net/53R2p/

Answer 3

如果唯一目标是确定最大嵌套级别，我会考虑使用querySelector（因为它应该经过优化）：

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

Example（与此SO页面标记的一部分）

Answer 4

我个人最喜欢的是使用堆栈。您不断推送标签，直到找到相应的/对称的结束标签。然后你可以弹出或做你想做的任何分析。这是Comp Sci Data Structures类的经典示例。

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

4 个答案: