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