parentNode, firstChild, lastChild, nextSibling y previousSibling

Tabla de contenidos

1. Introducción
2. parentNode
3. firstChild
4. lastChild
5. nextSibling
6. previousSibling

Introducción

En la sección anterior hemos visto cómo seleccionar un elemento por medio de getElementById. Ahora vamos a ver cómo seleccionar otros nodos según algunas de las relaciones de parentesco establecidas alrededor de tal elemento.

parentNode

Por medio de parentNode podemos seleccionar el elemento padre de otro elemento. Por ejemplo, si tenemos el siguiente código:

    <div>
        <p id="introduccion">Párrafo introductorio.</p>
    </div>
            

la siguiente línea de script:

    document.getElementById('introduccion').parentNode;
            

selecciona el elemento padre del elemento identificado como introduccion, en este caso el div.

firstChild

Con firstChild lo que seleccionamos es el primer hijo de un elemento. Por desgracia, hay discrepancias entre los diversos navegadores sobre qué debe considerarse o no hijo de un nodo, por lo que esta propiedad en ocasiones complica demasiado un script.

Supongamos el siguiente fragmento de código:

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

Parece, al menos intuitivamente, que document.getElementById('contenido').firstChild debería seleccionarnos el primer párrafo. Sin embargo, sólo ocurre así en Internet Explorer. El problema es que navegadores como Opera o Firefox interpretan también como hijos de un elemento los posibles espacios en blanco y saltos de línea que el elemento pueda contener. Estos, por tanto considerarían que el salto de línea entre el cierre del div y la apertura del primer p es el primer hijo.

Por ello, a menos que se quiera buscar alguna solución por medio de JavaScript, suelo aconsejar no emplear firstChild si se puede evitar, y limitarlo además a elementos cuyos contenidos sean en línea, que por lo general no contarán con saltos de línea en su interior. Por ejemplo, si el fragmento fuera el siguiente:

    <p><strong>Nota:</strong> La autoconservación está destinada al fracaso.</p>
            

firstChild devolvería de forma consistente el elemento strong en todos los navegadores actuales.

Actualización del 8 de septiembre de 2007: He recogido una explicación más extensa sobre el problema y una posible solución en «childNodes y el problema de los nodos de texto vacíos».

lastChild

La propiedad lastChild funciona exactamente como firstChild, pero se refiere el último de los hijos de un elemento. Se aplican, por tanto, las mismas indicaciones anteriores.

nextSibling

Gracias a nextSibling, lo que podemos seleccionar es el siguiente hermano de un elemento.

Se aplican las mismas limitaciones que para las dos propiedades anteriores.

previousSibling

previousSibling funciona igual que nextSibling, pero selecciona el hermano anterior de un elemento.

Igual para sus limitaciones.

Veamos ahora unos cuantos ejemplos de estas propiedades.