Foros del Web » Programando para Internet » Javascript »

navegar los nodos (DOM)

Estas en el tema de navegar los nodos (DOM) en el foro de Javascript en Foros del Web. Dado algo como esto esto <ul> <li class="campos">* Nombre</li> <li class="aca"><input id="f_nombre" type="text" class="requerido"/></li> <li class="verificador mal">&nbsp;</li> </ul> Quiero cambiar el class del tag li, ...
  #1 (permalink)  
Antiguo 30/06/2010, 09:04
 
Fecha de Ingreso: julio-2009
Mensajes: 27
Antigüedad: 15 años, 4 meses
Puntos: 2
navegar los nodos (DOM)

Dado algo como esto esto

<ul>
<li class="campos">* Nombre</li>
<li class="aca"><input id="f_nombre" type="text" class="requerido"/></li>
<li class="verificador mal">&nbsp;</li>
</ul>

Quiero cambiar el class del tag li, que tiene la clase "verificador mal", pero para ello tengo que dirigirme desde el tag input (que es el que ejecuta la función).
Como llego al nodo correcto.

Probe con this.parentNode.nextSilbing.className da indefinido
lo mismo this.parentNode.parentNode.lastChild

alguna idea?
y de paso si saben de algun link que indique como navegar los nodos en Jquery.

Gracias!
  #2 (permalink)  
Antiguo 30/06/2010, 09:56
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: navegar los nodos (DOM)

nextSibling debería funcionar, por las dudas haz esto:

document.getElementById('f_nombre').parentNode.nex tSibling.style.border = '2px solid red';

Si funciona, verás el li con un borde rojo.

Por otro lado, "verificador mal" no es un nombre de clase, es el nombre de dos clases. Ese elemento pertenece a la clase "verificador", y a la clase "mal". por className no tendrás el valor que querés, quizás probando por getAttribute('class') sí obtengas lo que querés.


Saludos.
  #3 (permalink)  
Antiguo 30/06/2010, 14:48
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: navegar los nodos (DOM)

Cita:
Probe con this.parentNode.nextSilbing.className da indefinido
lo mismo this.parentNode.parentNode.lastChild
en teoría se entendería que así debería funcionar pero técnicamente no. ¿razón? te estas olvidando de los nodos TextNode.

Código:
<ul>
<li class="campos">* Nombre</li>
<li class="aca"><input id="f_nombre" type="text" class="requerido"/></li>
<li class="verificador mal">&nbsp;</li>
</ul>
fíjate que cada elemento esta separado por una nueva linea (linefeed), los navegadores lo analizan como un nodo. para comprobarlo, itera el NodeList childNodes del elemento UL. te debe dar más o menos algo como [TextNode, HTMLLiElement, TextNode, HTMLLiElement, TextNode, HTMLLiElement, TextNode]. en base a esto se entiende que la solución es sencilla, en lugar de invocar una sola vez nextSibling se invocaría dos veces. en realidad esa es la solución, pero hay un problema. usando ese mismo esquema HTML, el user-agent de iexplorer no recrea los nodos TextNode cuando éste contiene caracteres no imprimibles. o sea, caracteres white-spaces: espacios y line feeds. por lo que invocar dos veces nextSibling estaría haciendo referencia, no al segundo HTMLLiElement, sino al tercero.

¿cómo se soluciona? evitando espacios entre cada etiquetas. lo que lleva a sobrentender que hay que escribir el código HTML en una sola linea. es una opción pero pudiera ser un tanto complicado para luego analizar la estructura del documento. la solución es que en lugar de escribir la etiqueta en una sola linea se escriben en dos de modo que se le pueda dar continuidad. por ejemplo, el código anterior quedaría de la siguiente forma, o bien se puede usar diferentes variantes. el punto es que no hay espacios entre cada etiqueta.
Código:
<!-- posibilidad #1 -->
<ul
><li class="campos">* Nombre</li
><li class="aca"><input id="f_nombre" type="text" class="requerido"/></li
><li class="verificador mal">&nbsp;</li
></ul>

<!-- posibilidad #2 -->
<ul><li class="campos">* Nombre</li
><li class="aca"><input id="f_nombre" type="text" class="requerido"/></li
><li class="verificador mal">&nbsp;</li></ul>

<!-- posibilidad #3 -->
<ul><li class="campos">* Nombre
</li><li class="aca"><input id="f_nombre" type="text" class="requerido"/>
</li><li class="verificador mal">&nbsp;</li></ul>

<!-- posibilidad #4 -->
<ul><li class="campos">* Nombre</li><li class="aca"><input id="f_nombre" type="text" class="requerido"/></li><li class="verificador mal">&nbsp;</li></ul>
de esta forma te funciona tanto en navegadores que consideran como TextNodes los espacios en blanco como los que no lo consideran.

@edit: al final pude encontrar el artículo donde se discute, https://developer.mozilla.org/en/whitespace_in_the_dom
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 30/06/2010 a las 14:53

Etiquetas: dom, navegar, nodos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:53.