Como obtener al padre de un elemento con vanilla JS

· 1 min de lectura
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);

Artículos Relacionados

Cómo utilizar window.confirm()
· 1 min de lectura
SVG generadores de patrones
· 1 min de lectura
Como detectar un elemento sticky cuando se queda fijo
· 1 min de lectura
Convertir una cadena en un array en JavaScript
· 2 min de lectura
Video responsive de YouTube y Vimeo con HTML y CSS
· 1 min de lectura
¿Qué es Deno ? reemplazará a NodeJS?
· 3 min de lectura