Como obtener al padre de un elemento con vanilla JS

Hoy vamos a ver dos formas para obtener al padre de un elemento con vanilla JavaScript.

La propiedad parentNode

Cada elemento del DOM tiene una propiedad sobre él. Esto devuelve al padre del elemento element.parentNode.

Veamos una lista de elementos.

<ul id="animals">
    <li id="cat">😺</li>
    <li id="dog">🐶</li>
    <li id="frog">🐸</li>
    <li id="monkey">🐵</li>
</ul>

Usando la propiedad parentNode, podemos obtener el elemento padre #animals de nuestros elemento de la lista #dog.

const dog = document.querySelector('#dog');

// Devuelve el elemento #animales
console.log(dog.parentNode);

Encontrar el primer padre que coincida con un selector con el método closest()

Digamos que tienes una lista anidada, y quieres encontrar el primer elemento padre con una clase de .animal-planet

<ul class="animal-planet" id="animals">
    <li class="cat">😺</li>
    <li class="dog">
      <ul class="dogs" id="sublist">
        <li class="bulldog">Bulldog</li>
        <li class="chihuahua" id="id-chihuahua">Chihuahua</li>
        <li class="doberman">Doberman</li>
        <li class="rottweiler">Rottweiler</li>
      </ul>
    </li>
    <li class="frog">🐸</li>
    <li class="monkey">🐵</li>
</ul>

Puedes llamar al método closest() en el elemento para obtener al padre coincidente y pasar el selector como argumento.

const chihuahua = document.querySelector('#id-chihuahua');

// Devuelve el elemento '#animals'
chihuahua.closest('.animal-planet');

El método también verificará el elemento al que se llama, por lo que si el elemento tuviera la clase, ese sería el resultado coincidente.

Puede comenzar con el primer elemento primario combinando la propiedad y el método parentNode closest()

const chihuahua = document.querySelector('#id-chihuahua');

// Comenzará comprobando el elemento padre de #id-chihuahua en lugar del propio #id-chihuahua
const parent = chihuahua.parentNode.closest('.animal-planet');

console.log(parent);