如何在
HTML DOM中进行迭代并在
javascript中列出具有深度的所有节点.
例：
<div>
<img src="foo.jpg">
<p>
<span>bar</span>
</p>
</div>
会导致
> div 0
> img 1
> p 1
>跨度2
解决方法
编写一个跟踪深度的递归函数：
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所指出的,这也将列出文本节点,但是我们可以在testing the nodeType之前对它们进行过滤.此代码的变化将允许/忽略其他节点类型.
function element_list(el,depth) {
if (el.nodeType === 3) return;
