2009-02-27 5 views
7

Ich muss auf den DOM-Baum zugreifen und erhalten die Elemente nur 1 Ebene unter dem aktuellen Element.Holen Sie Elemente nur 1 Ebene unter dem aktuellen Element von Javascript

Lesen Sie den folgenden Code ein:

<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> 

ich die drei Elemente "a", "b", "c" unter "Knoten" erhalten möchten. Was soll ich machen?

var nodes = node.getElementsByTagName ("div") < ---- Ich bekomme alle divs, aber nicht die 3 divs, die ich brauche.

var nodes = node.childNodes; < ---- funktioniert in IE, aber FF enthält Textknoten

Kann jemand das Problem lösen?

Antwort

9

Sie könnten eine Funktion verwenden, die alle Nicht-Elementknoten Regeln aus:

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

Danke, half mir aus - Tipp für andere Benutzer - es ist children.push (Kind); – dpmguise

+0

Dank für den Hinweis auf. Ich habe die Antwort entsprechend geändert – Turismo

+0

Sie könnten auch splice() in Betracht ziehen Knoten zu löschen.Es könnte ein wenig schneller sein? –

4

ich sehr empfehlen würde man bei JQuery suchen. Die Aufgabe, die Sie ausführen möchten, ist einfach in reinem Javascript, aber wenn Sie ein zusätzliches DOM-Traversal machen, wird JQuery Ihnen unzählige Stunden der Frustration ersparen. Nicht nur das, aber es funktioniert über alle Browser und hat eine sehr gute "Dokument bereit" -Methode.

Ihr Problem mit JQuery gelöst wie folgt aussieht:

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

Es ist für jedes Element mit der ID "node" sucht dann gibt seine Kinder. In diesem Fall ist children eine JQuery-Auflistung, die mithilfe einer for-Schleife durchlaufen werden kann. Zusätzlich können Sie mit dem Befehl each() über sie iterieren.

0

Ich denke, node.childNodes ist der richtige Startpunkt. Sie könnten (um es auch mit FF arbeiten zu lassen), den Knotennamen (und möglicherweise den Knotentyp) aller untergeordneten Knoten testen, um Textknoten zu überspringen.

Sie können auch einige Javascript-Bibliothek wie prototype, die eine Menge nützlicher Funktionen bieten.

3

Dies ist simplier als Sie denken:

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

Das funktioniert nicht, wenn der Knoten einen anderen Knoten des gleichen Typs enthält. – Kaiido

+0

'..querySelectorAll' ? –

1

Versuchen Sie, diese (späte Antwort, kann aber für andere nützlich sein):

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

Meiner Meinung nach ist der einfachste Weg, dies zu tun, ist, fügen Sie einen Klassennamen zu dem ersten Ebene untergeordneten Knoten:

<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> 

und dann die Methode zu verwenden, getElementsByClassName, so in diesem Fall:

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

ich einen Text hinzugefügt haben, so können wir sehen, dass es funktioniert, und JavaScript, die „hinzugefügt wird add!"Zum Ende des jeder des divs an der Basis:

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>