[SOLUCIONADO] No logro acceder a un elemento.

[neoanderson]

Hola a todos.
Estoy queriendo terminar una página web con html,css y javascript.
Pero tengo este problema.
Tengo una función que se llama mostrar_precio que recibe un argumento que es un elemento y otro argumento que es el precio a insertar.
Yo paso "this" a la función esperando poder acceder al hijo de texto del hermano siguiente de su padre (elemento.parentElement.nextSibling.childNodes[1].innerHTML = precio;),pero no lo consigo.
La consola web de firefox me indicó la anterior instrucción "undefined".

Acá les paso el código y por favor explíquenme ¿por qué undefined?

Código HTML:

<div>
                <div>
                    <img src="../img/sublineas/ojos/sombra-individual.jpg"><span>SOMBRAS COMPACTAS INDIVIDUALES.<br />Sombras para ojos de gran cobertura, aterciopeladas y con excelente deslizamiento. Su textura sedosa facilita la aplicaci&oacute;n perfecta del color. Con ingredientes de polvo altamente micronizados que garantizan un maquillaje duradero. Pueden combinarse con otros tonos para crear m&uacute;ltiples combinaciones de color y diferentes looks de tendencia. Contienen vitamina E y filtro solar.</span>
                </div>
                <div>
                    <img src="../img/COL128700D.jpg"><img src="../img/COL128800D.jpg"><img src="../img/COL131700D.jpg">
                </div>
                <div>
                    <a href="#">A&ntilde;adir al carrito</a>
                    <span>$43,50.</span>
                </div>
                <div>
                    <img src="../img/sublineas/ojos/sombra-duo.jpg"><span>Sombras compactas d&uacute;o.<br />La combinaci&oacute;n perfecta de dos colores para lograr una mirada cautivante. Su textura sedosa permite un trabajo preciso de los colores y el aplicador de punta aterciopelada difumina perfectamente la sombra. Para lograr el efecto deseado, primero se recomienda aplicar el tono m&aacute;s claro sobre el p&aacute;rpado, y luego, difuminar el tono m&aacute;s oscuro en el pliegue del ojo.</span>
                </div>
                <div>
                    <img src="../img/COL130300D.jpg" onmouseover="mostrar_precio(this,'52,90')"><img src="../img/COL130500D.jpg" onmouseover="mostrar_precio(this,'52,90')"><img src="../img/COL128400D.jpg" onmouseover="mostrar_precio(this,'114,90')">
                </div>
                <div>
                    <a href="#">A&ntilde;adir al carrito</a>
                    <span>$114,90.</span>
                </div>
                <div>
                    <img src="../img/sublineas/ojos/mascaras.jpg"><span>M&aacute;scaras de pesta&ntilde;as.<br />Tres colores arm&oacute;nicamente combinados para lograr un look sofisticado. Su textura sedosa permite un trabajo preciso de los colores y el aplicador de punta aterciopelada difumina perfectamente la sombra. Para lograr el efecto deseado, primero se recomienda aplicar el tono m&aacute;s claro sobre el p&aacute;rpado y difuminarlo con el tono medio hacia el costado exterior; luego, lograr profundidad aplicando el tono m&aacute;s oscuro en el pliegue del ojo.</span>
                </div>
                <div>
                    <img src="../img/COL140100D.jpg">&nbsp;<img src="../img/COL140800D.jpg">&nbsp;<img src="../img/COL140800D.jpg">
                </div>
                <div>
                    <a href="#">A&ntilde;adir al carrito</a>
                    <span>$94,90.</span>
                </div>
                <div>
                    <img src="../img/sublineas/ojos/delineadores.jpg"><span>Delineadores de ojos.<br />F&oacute;rmulas excepcionales para lograr pesta&ntilde;as m&aacute;s fuertes, sanas y visiblemente m&aacute;s largas. Cero grumos. Contienen pigmentos naturales y fibras de seda que aumentan el volumen de las pesta&ntilde;as. Sus pinceles est&aacute;n especialmente dise&ntilde;ados para generar una definici&oacute;n de alto impacto. Variedad de tonos.</span>
                </div>
                <div>
                    <img src="../img/COL154700D.jpg" onmouseover="javascript:documentElement.nextSibling.childNodes[1].innerHTML='59,90';">&nbsp;<img src="../img/COL154800D.jpg" onmouseover="mostrar_precio(this,'23,90')"><img src="../img/COL152500D.jpg" onmouseover="mostrar_precio(this,'59,90')"><img src="../img/COL153000D.jpg" onmouseover="mostrar_precio(this,'34,90')">
                </div>
                <div>
                    <a href="#">A&ntilde;adir al carrito</a>
                    <span>$94,50.</span>
                </div>
            </div>
        </div>
    </body>
</html>
 

Acá está el pequeñísimo código javascript:

Código Javascript:

function mostrar_precio(elemento,precio) {
    elemento.parentNode.nextSibling.childNodes[1].innerHTML = precio;
}
 

Les agradezco.

[Alexis88]

Como los elementos están uno debajo de otro, se genera un nodo de texto de espacio en blanco, por lo que ese vendría a ser el siguiente elemento hermano del que haces referencia. En lugar de nextSibling, utiliza nextElementSibling.

Saludos

[IsaBelM]

este es el articulo al que haces referencia. lo curioso es que habla del comportamiento de navegadores modernos. con un ejemplo se verá mejor

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
console.log(document.getElementById('div-01').nextSibling);
console.log(elemAdjacente(document.getElementById( 'div-01'), 'nxt'))


function elemAdjacente(elm, adj) {

if (adj == 'nxt') {

var elemento = elm.nextElementSibling || elm.nextSibling;

} else {

var elemento = elm.previousElementSibling || elm.previousSibling;
}


if (elemento == null || elemento.nodeType != 1) {

return null;

} else {

return elemento;
}
}
</script>

retorna

• chrome, ff, ie9 --> #text y <div id=​"div-02">​Here is div-02​</div>​
• <=ie8 --> [object HTMLDivElement] y [object HTMLDivElement]

en cuanto al problema del usuario se resuelve así

function mostrar_precio(elemento,precio) {
elemAdjacente(elemento.parentNode, 'nxt').querySelector('span').innerHTML = precio;
}

[neoanderson]

Hola.
Gracias a todos por haberme asistido.
La solución me funcionó pero sólo para la última parte del archivo html.
Me estoy descargando esa parte de la especificación DOM completa para entenderlo mejor y no tener que estar preguntando a cada rato por estas menudencias.(para lo cual estoy usando httrack y me descargo la especificación completa).
Les agradezco.

Pd:Voy a marcar este tema como solucionado.