Récupère les éléments juste au-dessous de l'élément courant en javascript

Question

J'ai besoin d'accéder à l'arbre DOM et d'obtenir les éléments juste au-dessous de l'élément courant.

Lire le code suivant:

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

Je veux obtenir les 3 éléments "a", "b", "c" sous "noeud". Que devrais-je faire?

var nodes = node.getElementsByTagName ("div") < ---- Je reçois tous les divs mais pas les 3 div dont j'ai besoin.

var nœuds = node.childNodes; < ---- fonctionne dans IE, mais FF contient le noeud de texte

Est-ce que quelqu'un sait comment résoudre le problème?

Answer 1

Vous pouvez utiliser une fonction qui exclut tous les nœuds non-élément:

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

Je recommande vivement vous regardez JQuery. La tâche que vous cherchez à faire est simple dans Javascript pur, mais si vous faites une traversée de DOM supplémentaire, JQuery va vous épargner d'innombrables heures de frustration. Non seulement cela, mais il fonctionne dans tous les navigateurs et a une très bonne méthode "document prêt".

Votre problème résolu avec JQuery ressemble:

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

Il cherche un élément avec un id de « nœud » puis retourne ses enfants. Dans ce cas, children est une collection JQuery pouvant être itérée en utilisant une boucle for. De plus, vous pouvez itérer sur eux en utilisant la commande each().

Answer 3

Je pense que node.childNodes est le bon endroit pour commencer. Vous pourriez (pour le faire fonctionner avec FF aussi), tester le nodeName (et éventuellement nodeType) de tous les nœuds enfants que vous obtenez, pour ignorer les nœuds de texte.

Vous pouvez également jeter un oeil à une bibliothèque javascript comme prototype, qui fournissent beaucoup de fonctions utiles.

Answer 4

C'est plus simple que vous le pensez:

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

Answer 5

Essayez cette (réponse tardive, mais peut être utile pour les autres):

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

Answer 6

À mon avis, la meilleure façon de le faire est de ajouter un nom de classe aux nœuds enfants de premier niveau :

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

puis d'utiliser la méthode getElementsByClassName, dans ce cas:

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

Answer 7

J'ai ajouté un texte afin que nous puissions voir qu'il fonctionne, et JavaScript qui ajoutera « ajoutée!«Au fond de chacun des divs à la base:

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>