Ejemplos de parentNode y demás

parentNode

Vamos a seleccionar el padre de un elemento concreto de esta página, un párrafo con id="parrafo" —por aquello de no rompernos la cabeza buscando un nombre—, por medio de la función siguiente:

    function seleccionar_padre() {
        var hijo = document.getElementById('parrafo');
        alert(hijo.parentNode);
    }
        

Primero lo que hago es seleccionar el elemento por medio de getElementById, y guardar su referencia en la variable hijo, por si en cualquier otro momento necesito trabajar sobre el mismo elemento. Una vez hecho esto, simplemente pido la propiedad parentNode del elemento y muestro su valor a través de una alerta.

Seleccionar el padre del párrafo

Los navegadores competentes devuelven [object HTMLDivElement], identificando claramente el elemento. Otro navegador devuelve un lacónico [object], pero se refiere al mismo elemento.

firstChild, lastChild, nextSibling y previousSibling cuando no dan problemas…

Ahora vamos a trabajar sobre un código como éste:

    <p id="otro-parrafo"><em>Éste</em> es un párrafo con un <strong>elemento destacado</strong> en su interior.</p>
        

y vamos a poner en práctica todo lo que hemos visto del DOM hasta ahora.

Primero, vamos a seleccionar el primero de los hijo, en este caso el elemento em. Para ello nos basta con esta línea:

    document.getElementById('otro-parrafo').firstChild;
        

Si por el contrario queremos seleccionar el último de los hijos, empleamos:

    document.getElementById('otro-parrafo').lastChild;
        

Ahora vamos a probar seleccionar hermanos de elementos. Primero, quiero seleccionar el hermano posterior del elemento em:

    document.getElementById('otro-parrafo').getElementsByTagName('em')[0].nextSibling;
        

Como dijimos en la sección anterior del curso, aunque sé que no existe otro elemento em en todo el documento, tengo que especificar su índice ([0]) para referirme a él y no a la lista de nodos.

Por el contrario, ahora voy a seleccionar el mismo nodo, pero haciendo referencia a él como el hermano anterior del elemento strong:

    document.getElementById('otro-parrafo').getElementsByTagName('strong')[0].previousSibling;
        

Probemos.

Éste es un párrafo con un elemento destacado en su interior.

Seleccionar el primer hijo del párrafo

Seleccionar el último hijo del párrafo

Seleccionar el hermano posterior del elemento em

Seleccionar el hermano anterior del elemento strong

La primera alerta nos devuelve [object HTMLSpanElement], una forma genérica de referirse a un elemento en línea, como de hecho es em. Para los otros tres casos recibimos [object Text], puesto que el último hijo del párrafo y el hermano que seleccionamos en los otros dos casos son nodos de texto.

…y cuando sí los dan

Acabamos de ver el caso para el que recomiendo limitar el uso de las propiedades relativas de parentesco: un elemento en línea del que necesitamos extraer información. Cuando en el código tenemos saltos de línea los resultados cambias dramáticamente.

Supongamos este código:

    <div id="unDiv">
        <p>Un párrafo</p>
        <p>Otro párrafo</p>
    </div>
        

Lo que voy a intentar hacer es cambiar la apariencia del primero de los párrafos:

    function resaltar_elemento(){
        var elementoAResaltar = document.getElementById('unDiv').firstChild;
        elementoAResaltar.style.backgroundColor = '#FF3';
    }
        

A primera vista, no hay ningún problema: selecciono el primer hijo de unDiv y con un poco de HTML DOM de Nivel 2 modifico su atributo style.

Veámoslo:

Resaltar el primer párrafo

Si el resultado se parece a lo que viene a continuación…

…me juego una comida a que está viendo esta página con Internet Explorer. En Firefox, Opera y Safari, no ocurrirá cambio alguno.

¿Por qué ocurre esto? Bueno, porque estos navegadores consideran que el salto de línea entre elementos es un nodo de texto como pueda serlo un espacio en blanco o un tabulado. Y como desde el punto de vista del DOM cualquier nodo de texto es hijo de un elemento como pueda serlo un p o un div, estrictamente ese salto es el primer hijo de unDiv.

Así, al ejecutar la función, el error que obtenemos es que elementoAResaltar.style no tiene propiedades, porque según la especificación de la interfaz ElementCSSInlineStyle (inglés), style sólo existe para elementos de HTML, no para nodos de texto.

Por ello, sólo se puede recomendar prudencia a la hora de emplear firstChild, lastChild, nextSibling y previousSibling.

Volver al curso