4

例如：

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

这个嵌套深度是 3？但更一般地说，我怎样才能遍历 DOM 来找到这些信息？

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

JavaScript 中的 n 叉树

4

4 回答 4

9

优雅的递归解决方案

使用此功能 -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;
}
于 2013-08-21T17:36:11.927 回答
5 
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/

于 2013-08-21T17:33:23.117 回答
2

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

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

示例（带有此 SO 页面标记的一部分）

于 2013-08-21T18:03:03.483 回答
1

My personal favorite is to use a stack. You keep pushing tags until you reach a corresponding/symmetric end tag. Then you can pop or do whatever analysis you'd like to. This is a classic example from a Comp Sci Data Structures class.

于 2013-08-21T17:26:14.343 回答