8 - Otras formas de acceder a los nodos hijos (firstChild y lastChild - firstElementChild y lastElementChild)


Habiamos visto anteriormente que podemos acceder a todos los hijos de un nodo por medio del vector childNodes o todos los hijos de tipo elemento con children. Otra forma de acceder al primer y último nodo hijo es por medio de las propiedades firstChild (retorna la referencia del primer hijo, es lo mismo que poner obj.childNodes[0]) y obj.lastChild (retorna la referencia del último hijo, es sinónimo de poner obj.childNodes[obj.childNodes.length-1])

Veamos con un ejemplo como utilizar estas dos propiedades, dispondremos tres párrafos dentro de un div. Acceder al primer hijo del div y luego avanzando con el método nextSibling llegar hasta el final de la lista de hermanos, mostrar el texto de cada párrafo.
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 id="parrafos">
        <p>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('parrafos')
    let puntero2 = puntero1.firstChild
    while (puntero2 != null) {
        if (puntero2.nodeType == Node.ELEMENT_NODE)
            alert(puntero2.childNodes[0].nodeValue)
        else
            alert('No es un nodo tipo elemento')
        puntero2 = puntero2.nextSibling
    }
}

Primero obtenemos la referencia al div:

    let puntero1 = document.getElementById('parrafos')

Seguidamente obtenemos la referencia al primer nodo hijo del div:

    let puntero2 = puntero1.firstChild

Mediante una estructura repetitiva avanzamos por cada nodo hermano y aquellos que son de tipo elemento procedemos a obtener la referencia del nodo hijo que es de tipo texto:

    while (puntero2 != null) {
        if (puntero2.nodeType == Node.ELEMENT_NODE)
            alert(puntero2.childNodes[0].nodeValue)
        else
            alert('No es un nodo tipo elemento')
        puntero2 = puntero2.nextSibling
    }

fistElementChild y lastElementChild

Con el atributo fistElementChild obtenemos la referencia del primer nodo de tipo elemento.

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

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

Retornar