Ottieni elementi di 1 livello sotto l'elemento corrente di javascript

Question

Ho bisogno di accedere all'albero DOM e ottenere gli elementi solo 1 livello sotto l'elemento corrente.

Leggi il seguente codice:

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

voglio ottenere i 3 elementi "a", "b", "c" in "nodo". Cosa dovrei fare?

var nodes = node.getElementsByTagName ("div") < ---- Ricevo tutti i div ma non i 3 div di cui ho bisogno.

var nodes = node.childNodes; < ---- funziona in IE, ma FF contiene Nodo di testo

Qualcuno sa come risolvere il problema?

Answer 1

Si potrebbe utilizzare una funzione che esclude tutti i nodi non-elemento:

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

mi raccomando si guarda JQuery. Il compito che stai cercando di fare è semplice in puro Javascript, ma se stai facendo un ulteriore attraversamento DOM, JQuery ti farà risparmiare innumerevoli ore di frustrazione. Non solo, ma funziona su tutti i browser e ha un ottimo metodo "document ready".

tuo problema risolto con JQuery assomiglia:

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

Sembra per ogni elemento con ID "nodo" quindi torna suoi figli. In questo caso, children è una raccolta JQuery che può essere iterata utilizzando un ciclo for. Inoltre, è possibile eseguire iterazioni su di essi utilizzando il comando each().

Answer 3

Penso che node.childNodes sia il posto giusto per iniziare. È possibile (per farlo funzionare anche con FF), testare nodeName (e possibilmente nodeType) di tutti i nodi figli ottenuti, per saltare i nodi di testo.

Inoltre si potrebbe dare un'occhiata ad alcune librerie javascript come prototype, che forniscono molte utili funzioni.

Answer 4

Questo è più semplice di quanto si pensi:

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

Answer 5

Prova questa (risposta in ritardo, ma può essere utile per gli altri):

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

Answer 6

A mio parere il modo più semplice per farlo è quello di aggiungere un nome di classe per i primi nodi livello figlio:

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

e quindi di utilizzare il metodo getElementsByClassName, quindi in questo caso:

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

Answer 7

ho aggiunto una parte di testo in modo che possiamo vedere che si sta lavorando, e JavaScript che aggiunge "aggiunto!"Al fondo di ciascuno dei div alla 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>