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

如果我有一個如下所示的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

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

回答

相關問題