Acceder a los nodos hijo

rynkydynky · #1 (**permalink**) 09/03/2011, 09:59

Buen dia, quiero saber cómo acceder al segundo elemento de un elemento html, estuve leyendo y probé con childnodes pero no me funciona.

el codigo es este:

Código HTML:

 <div class="sidebar1">
    <ul class="nav">
      <li><div class='keynav_box' onclick='document.location.href="index.html";'><a href="index.html">play</a></div></li>
      <li><div class='keynav_box' onclick='document.location.href="video.html";'><a href="video.html">video</a></div></li>
      <li><div class='keynav_box' onclick='document.location.href="how_to_play.html";'><a href="how_to_play.html">how to play</a></div></li>
    </ul>
    <!-- end .sidebar1 --></div>

Necesito acceder al keynav_box del segundo li.

Gracias.

goteen_mx · #2 (**permalink**) 09/03/2011, 10:53

Primero debes tener toda la estructura de etiquetas del HTML

Código Javascript:

Ver original<html>
<head>
</head>
<body>
 <div class="sidebar1">
    <ul class="nav">
      <li><div class='keynav_box' onclick='document.location.href="index.html";'><a href="index.html">play</a></div></li>
      <li><div class='keynav_box' onclick='document.location.href="video.html";'><a href="video.html">video</a></div></li>
      <li><div class='keynav_box' onclick='document.location.href="how_to_play.html";'><a href="how_to_play.html">how to play</a></div></li>
    </ul>
 </div>
</body>
</html>

y seria algo asi

Código Javascript:

Ver originaldocument.childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[0];

ten en cuenta que ese es el div, adentro tienes un hijo <a>

y como sugerencia puedes ponerle id a tus objetos, así seria má facil

Código Javascript:

Ver originaldocument.getElementById("miSegundoLiPrimreDiv")

y listo

Saludos

Me surgió la duda despues de leer la respuesta, quires acceder al DIV o al atributo class del DIV??????

_cronos2 · #3 (**permalink**) 09/03/2011, 11:44

Cita:

Iniciado por goteen_mx

y seria algo asi

Código Javascript:

Ver originaldocument.childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[0];

En realidad:

Código Javascript:

Ver originaldocument.querySelectorAll('ul.nav div.keynav_box')[1];

Además el espacio entre tag y tag es tomado como un nodo de texto vacío, así que habría que tenerlo en cuenta a la hora de acceder a ellos; y document sólo tiene un nodo hijo, que es html. Puedes referirte simplemente como document.body .
Saludos (:

goteen_mx · #4 (**permalink**) 09/03/2011, 14:10

_cronos2, Muy buena observación la del nodo de texto, creo que ya habiamos respondido algo similar en otro tema.

Saludos.

rynkydynky · #5 (**permalink**) 09/03/2011, 14:35

Muchas gracias por la ayuda, pero no me funciona. Esto es lo que estoy intentando hacer, estoy utilizando un plugin jquery para navegar con el teclado y necesito que en otra sección de la pagina se resalte el link que lleva a esa pagina para que el usuario sepa en donde está. éste es el codigo:

Código HTML:

    	$('.sidebar1 div').keynav('keynav_focusbox','keynav_box');
    	$('.sidebar1 div:first').removeClass().addClass('keynav_focusbox');

en div:first se le dice que resalte el elemento, pero como es logico siempre resalta el primero, pero quiero que si el usuario ha ingresado al segundo link lo resalte. estaba intentando con ul li:nth-child(2) pero no funciona. les agradezco la ayuda.