迭代HTML DOM并获得深度

Question

如何在HTML DOM中进行迭代并在javascript中列出具有深度的所有节点.

例:

<div>
    <img src="foo.jpg">
    <p>
        <span>bar</span>
    </p>
</div>

会导致

• div 0
• img 1
• 第1页
• 跨度2

Answer 1

编写一个跟踪深度的递归函数:

function element_list(el,depth) {
    console.log(el+' '+depth);
    for(var i=0; i<el.children.length; i++) {
        element_list(el.children[i],depth+1);
    }
}
element_list(document,0);

正如CodeiSir所指出的,这也将列出文本节点,但我们可以通过测试nodeType来过滤它们.此代码的变体将允许/忽略其他节点类型.

function element_list(el,depth) {
   if (el.nodeType === 3) return;

Answer 2

请注意,其他答案是/无法正确纠正...

这也将过滤掉"TEXT"节点,而不输出BODY标签.

function getDef(element, def) {
  var str = ""

  var childs = element.childNodes
  for (var i = 0; i < childs.length; ++i) {
    if (childs[i].nodeType != 3) {
      str += childs[i].nodeName + " " + def + "<br />"
      str += getDef(childs[i], def + 1)
    }
  }

  return str
}


// Example
document.body.innerHTML = getDef(document.body, 0)

<div>
  <img src="foo.jpg">
  <p>
    <span>bar</span>
  </p>
</div>