如何迭代元素的所有子元素

如果我有一个如下所示的html dom，没有使用任何库（如jQuery），我如何迭代任何给定元素的所有子元素。我需要检查是否在这些元素上设置了一些自定义属性。如何迭代元素的所有子元素

<div id="testme"> 
    <span><a></a></span> 
    <div> 
     <ul> 
      <li><a></a></li> 
     </ul> 
    </div> 
</div>

来源

2011-01-06 Arun P Johny

它使用HTML DOM + JavaScript是很容易的。

var printhere = document.getElementById("printhere"); 

function stepthrough(el, prefix){ 
    prefix = prefix || ""; 
    if(el){ 
     //Ignore the text nodes 
     if(!el.nodeName || !(/#text/i.test(el.nodeName))){ 
      printhere.innerHTML += "<br />" + prefix + el.tagName; 
      if(el.firstChild){ 
       stepthrough(el.firstChild, prefix + "--"); 
      } 
     } 

     if(el.nextSibling){ 
      stepthrough(el.nextSibling, prefix) 
     } 
    } 
} 

stepthrough(document.getElementById("testme"));

您可以自定义代码的printhere.innerHTML += "<br />" + prefix + el.tagName;一部分，它适合任何东西。

你可以在fiddle找到一个工作示例。

这是一个递归函数，它遍历所有的孩子和给定的节点

来源

2011-01-06 03:24:10

的subchildren保持我的回答简单的用于获取到问题肉的好处。试试这些，你想要哪一个？

//direct descendent nodes 
var children = document.getElementById('id').childNodes; 

// or 

//all nodes below the top node? 
var children = document.getElementById('id').getElementsByTagName('*');

来源

2011-01-06 03:29:56 jcolebrand

如何迭代元素的所有子元素

回答

相关问题