6 - Accediendo a un nodo padre (parentNode)


Si tenemos la referencia a un nodo podemos obtener fácilmente la referencia del nodo padre mediante la propiedad parentNode.
Veamos un ejemplo sencillo donde obtenemos la referencia de un párrafo contenido en un div. Luego por medio de esta referencia obtenemos la referencia al div y cambiamos el color de fondo del div.
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="Cambiar color de fondo del div" onClick="cambiarColor()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function cambiarColor() {
    let puntero = document.getElementById('parrafo1')
    let padre = puntero.parentNode
    padre.style.backgroundColor = '#ff0000'
}

Obtenemos la referencia del párrafo:

    let puntero = document.getElementById('parrafo1')

Ahora accedemos a la propiedad parentNode de la variable inicializada previamente:

    let padre = puntero.parentNode

Finalmente modificamos el color del div:

    padre.style.backgroundColor = '#ff0000'

Acotaciones

Es muy común utilizar una sintaxis más concisa sin tener que definir variables locales:

function cambiarColor() {
    document.getElementById('parrafo1').parentNode.style.backgroundColor = '#ff0000'
}

Retornar