7 - Accediendo a un nodo hermano (nextSibling y previousSibling - nextElementSibling y previousElementSibling)


Si tenemos la referencia de un nodo podemos fácilmente acceder a los otros nodos que se encuentran en la misma altura dentro del árbol que genera el DOM.


Veamos con un ejemplo como obtenemos la referencia de los nodos hermanos, implementaremos una página que contenga tres párrafos y sólo disponemos el id del primero de ellos.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <div>
        <p id="parrafo1">Este es el primer párrafo</p>
        <p>Este es el segundo párrafo</p>
        <p>Este es el tercer párrafo</p>
    </div>
    <input type="button" value="accediendo a los tres párrafos" onClick="proximoParrafo()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function proximoParrafo() {
    let puntero1 = document.getElementById('parrafo1')
    while (puntero1 != null) {
        if (puntero1.nodeType == Node.ELEMENT_NODE)
            alert(puntero1.childNodes[0].nodeValue)
        puntero1 = puntero1.nextSibling
    }
}

La propiedad nextSibling retorna la referencia del nodo hermano que se encuentra inmediatamente más abajo en el archivo HTML, pero a la misma altura si lo pensamos al archivo HTML como un árbol. También existe una propiedad llamado previusSibling que retorna la referencia del nodo hermano que se encuentra inmediatamente más arriba en el archivo HTML.
nextSibling y previusSibling retornan null en caso de no existir más nodos en dicho nivel.

Recordar:Algo muy importante que hay que tener en cuenta es que si hay un salto de línea entre dos párrafos lo interpreta y crea un nodo de texto y la propiedad nextSibling y previusSibling lo accede.

Ahora entonces para poder recorrer la lista de nodos hermanos podemos disponer una estructura repetitiva y avanzar por la lista. Mediante un if verificamos si se trata de un nodo de tipo elemento y procedemos a acceder a su nodo hijo que contiene el valor del texto del párrafo:

    let puntero1 = document.getElementById('parrafo1')
    while (puntero1 != null) {
        if (puntero1.nodeType == Node.ELEMENT_NODE)
            alert(puntero1.childNodes[0].nodeValue)
        puntero1 = puntero1.nextSibling
    }

Propiedades nextElementSibling y previusElementSibling

el atributo nextElementoSibling avanza al siguiente nodo de tipo elemento, a diferencia de la propiedad nextSibling que avanza tanto a nodos de tipo elemento como texto.

Luego para recorrer todos los nodos de tipo elemento el algoritmo nos queda:

    let puntero1 = document.getElementById('parrafo1')
    while (puntero1 != null) {
        alert(puntero1.childNodes[0].nodeValue)
        puntero1 = puntero1.nextElementSibling
    }

No nos hace falta hacer un if dentro del while, debido a que la propiedad nextElementSibling avanza al siguiente nodo de tipo Elemento.


Retornar