javascriptで現在の要素の1レベル下の要素を取得します

Question

DOMツリーにアクセスして、現在の要素の1レベル下の要素を取得する必要があります。

次のコードを読む：私は "ノード" の下の3つの要素 "A"、 "B"、 "C" を取得したい

<div id="node"> 
    <div id="a"> 
     <div id="aa"> 
      <div id="ab"> 
       <div id="aba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="b"> 
     <div id="ba"> 
      <div id="bb"> 
       <div id="bba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="c"> 
     <div id="ca"> 
      <div id="cb"> 
       <div id="cba"></div> 
      </div> 
     </div> 
    </div> 
</div> 

を。私は何をすべきか？

var nodes = node.getElementsByTagName（ "div"）< ----私はすべてのdivを取得しますが、必要な3つのdivは取得しません。

var nodes = node.childNodes; < ----はIEで動作しますが、FFにはテキストノードが含まれています

問題を解決する方法を知っている人はいますか？

Answer 1

あなたはすべての非要素ノードを除外機能を使用できます。私は非常にあなたがJQueryを見てお勧めします

function getChildNodes(node) { 
    var children = new Array(); 
    for(var child in node.childNodes) { 
     if(node.childNodes[child].nodeType == 1) { 
      children.push(child); 
     } 
    } 
    return children; 
} 

Answer 2

を。あなたがやろうとしている作業は純粋なJavascriptでは簡単ですが、DOMトラバーサルを追加している場合、JQueryは無限の時間を節約します。それだけでなく、すべてのブラウザで機能し、非常に優れた「文書準備」メソッドを備えています。それは、「ノード」、その子供を返すのIDを持つ任意の要素を探します

$(document).ready(function() { 
    var children = $("#node").children(); 
}); 

：jQueryを使って解決

あなたの問題は次のようになります。この場合、childrenは、forループを使用して反復処理できるJQueryコレクションです。さらに、each（）コマンドを使用してそれらを反復することもできます。

Answer 3

私はnode.childNodesが適切な場所であると思います。あなたは（それもFFで動作させるために）、テキストノードをスキップするために、取得したすべての子ノードのnodeName（および場合によってはnodeType）をテストできます。

有用な機能をたくさん提供する、prototypeのようなjavascriptライブラリもご覧ください。

Answer 4

これはあなたが思うよりもsimplierです：

var nodes = node.querySelector("node > div"); 

Answer 5

は（後半の答えを、他の人のために役立つことができます）、これを試してみてください。私の意見で

var list; 
list=document.getElementById("node").querySelectorAll("#node>div"); 

Answer 6

これを行うための最も簡単な方法はにあります

<div id="node"> 
    <div id="a" class="level_1"> 
     <div id="aa"> 
      <div id="ab"> 
       <div id="aba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="b" class="level_1"> 
     <div id="ba"> 
      <div id="bb"> 
       <div id="bba"></div> 
      </div> 
     </div> 
    </div> 
    <div id="c" class="level_1"> 
     <div id="ca"> 
      <div id="cb"> 
       <div id="cba"></div> 
      </div> 
     </div> 
    </div> 
</div> 

して、メソッドを使用する： 最初のレベルの子ノードにクラス名を追加getElementsByClassName、この場合はそう：

document.getElementById('node').getElementsByClassName('level_1'); 

Answer 7

我々はそれが働いていることを確認し、「追加を追加するJavaScriptことができますので、私はいくつかのテキストを追加しました！「ベースでのdiv要素のそれぞれの底に：

var cDiv = document.querySelectorAll('body > div > div'), i; 
 
for (i = 0; i < cDiv.length; i++) 
 
{ 
 
\t cDiv[i].appendChild(document.createTextNode('added!')); 
 
}

<div id="node"> 
 
    <div id="a">a 
 
     <div id="aa">aa 
 
      <div id="ab">ab 
 
       <div id="aba">aba</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="b">b 
 
     <div id="ba">ba 
 
      <div id="bb">bb 
 
       <div id="bba">bba</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="c">c 
 
     <div id="ca">ca 
 
      <div id="cb">cb 
 
       <div id="cba">cba</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>