Obtener elementos solo 1 nivel por debajo del elemento actual por javascript

Question

Necesito acceder al árbol DOM y obtener los elementos solo 1 nivel por debajo del elemento actual.

leer el código siguiente:

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

quiero conseguir los 3 elementos "a", "b", "c" en "nodo". ¿Que debería hacer?

var nodes = node.getElementsByTagName ("div") < ---- Obtengo todos los divs pero no los 3 divs que necesito.

var nodes = node.childNodes; < ---- funciona en IE, pero FF contiene el Nodo de texto

¿Alguien sabe cómo resolver el problema?

Answer 1

Se podría utilizar una función que descarta todos los nodos que no son elementos:

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

lo recomiendo mucho nos fijamos en JQuery. La tarea que pretendes hacer es sencilla en JavaScript puro, pero si estás haciendo un cruce DOM adicional, JQuery te ahorrará incontables horas de frustración. No solo eso, sino que funciona en todos los navegadores y tiene un muy buen método de "documento listo".

Su problema resuelto con jQuery parece:

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

Se busca cualquier elemento con un ID de "nodo" luego regresa a sus hijos. En este caso, children es una colección JQuery que se puede iterar utilizando un bucle for. Además, puedes iterar sobre ellos usando el comando each().

Answer 3

Creo que node.childNodes es el lugar adecuado para comenzar. Podría (para que funcione también con FF), probar el nodeName (y posiblemente nodeType) de todos los nodos secundarios que obtenga, para omitir los nodos de texto.

También puede echar un vistazo a alguna biblioteca de JavaScript como prototype, que proporcionan muchas funciones útiles.

Answer 4

Esto es más simple de lo que piensa:

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

Answer 5

probar este (respuesta tardía, pero puede ser útil para otros):

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

Answer 6

En mi opinión, la forma más fácil de hacer esto es añadir un nombre de clase a los primeros nodos de nivel niño:

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

y después de usar el método getElementsByClassName, por lo que en este caso:

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

Answer 7

he añadido algo de texto para que podamos ver que se está trabajando, y JavaScript que se sumará "añadido!"A la parte inferior de cada uno de los divs en 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>