Cómo obtener el padre de un elemento en JavaScript
Aprende cómo identificar y acceder al elemento padre de un nodo en el DOM usando JavaScript. Este proceso es esencial para navegar y manipular jerarquías de elementos en una página web de forma eficiente.
Obtener el elemento padre con parentNode
En JavaScript, puedes usar la propiedad parentNode para acceder al nodo padre de un elemento en el DOM. Este método es ampliamente utilizado para interactuar con estructuras jerárquicas y modificar elementos relacionados.
// Seleccionamos el elemento
const hijo = document.getElementById('miElemento');
// Obtenemos el nodo padre
const padre = hijo.parentNode;
console.log(padre); // Muestra el nodo padre en la consola
Si necesitas asegurarte de trabajar exclusivamente con elementos HTML (ignorando nodos como comentarios o textos), puedes usar la propiedad parentElement.
const padreElemento = hijo.parentElement;
console.log(padreElemento); // Retorna null si no hay un elemento padreAlgunos ejemplos
1. Acceso directo al padre:
const boton = document.querySelector('.boton');
const contenedor = boton.parentNode;
console.log(contenedor);2. Diferencia entre parentNode y parentElement:
const nodoTexto = document.createTextNode('Hola');
console.log(nodoTexto.parentNode); // Retorna el nodo padre
console.log(nodoTexto.parentElement); // Retorna null3. Modificar el estilo del padre:
const elemento = document.getElementById('item');
elemento.parentElement.style.backgroundColor = 'lightblue';Referencias oficiales
Consulta la documentación oficial en MDN Web Docs sobre parentNode para más detalles y ejemplos prácticos.
Jorge García
Fullstack developer