要素のすべての下位要素を反復する方法

Question

下の図のようにhtml domを持っていれば、どのようなライブラリ（jQueryなど）を使用せずにどのように任意の要素のすべての下位要素を反復処理できますか？これらの要素にカスタム属性が設定されているかどうかを確認する必要があります。

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

Answer 1

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の実例が見つかります。

これは、問題の肉になっての利益のために、単純な私の答えを維持する任意のノード

Answer 2

のすべての子供たちとsubchildrenを通過する再帰関数です。これらのいずれかを試してみてください。どちらが好きですか？

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

// or 

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