Cuando trabajamos con el DOM, es común que necesitemos seleccionar elementos en función de otro elemento
Es decir, en lugar de seleccionar elementos directamente por sus propiedades, queremos navegar a través de la jerarquía del DOM (ir a nodos padres, hijos, o hermanos).
JavaScript ofrece varios métodos que permiten seleccionar elementos relacionados con otro elementos. Estos métodos se pueden clasificar en las siguientes categorías:
- Métodos de relación en el DOM
- Métodos de verificación de la selección
Métodos de relación en el DOM
Los siguientes métodos son muy útiles cuando quieres navegar en el árbol DOM, seleccionando elementos relacionados con otro:
Obtener padres
| Comando | Valor devuelto | Descripción |
|---|---|---|
parentElement | HTMLElement o null | Selecciona el padre de un nodo. |
closest() | HTMLElement o null | Selecciona el ancestro más cercano que coincide con el selector CSS. |
Selecciona el elemento padre de un nodo.
const padre = miElemento.parentElement;Este método devuelve el nodo padre del elemento seleccionado. Si el nodo no tiene un padre, devolverá null.
Este método permite seleccionar el ancestro más cercano de un elemento que coincide con un selector CSS. Es útil para recorrer hacia arriba en el árbol DOM hasta encontrar el elemento adecuado.
const ancestroCercano = miElemento.closest('.mi-clase');Obtener hijos
| Comando | Valor devuelto | Descripción |
|---|---|---|
children | HTMLCollection | Devuelve una colección de los hijos de un nodo. |
firstElementChild | HTMLElement o null | Selecciona el primer hijo elemento del nodo. |
lastElementChild | HTMLElement o null | Selecciona el último hijo elemento del nodo. |
Devuelve una colección de los hijos de un nodo, es decir, todos los elementos que están directamente contenidos en él.
const hijos = miElemento.children;Devuelve una HTMLCollection de los nodos hijo del elemento, excluyendo los nodos de texto o comentarios. Solo devuelve elementos.
Selecciona el primer hijo elemento de un nodo.
const primerHijo = miElemento.firstElementChild;Selecciona el último hijo elemento de un nodo.
const ultimoHijo = miElemento.lastElementChild;Obtener hermanos
| Comando | Valor devuelto | Descripción |
|---|---|---|
nextElementSibling | HTMLElement o null | Selecciona el siguiente hermano del nodo. |
previousElementSibling | HTMLElement o null | Selecciona el hermano anterior del nodo. |
Devuelve el siguiente hermano del nodo, que es el siguiente elemento hermano.
const siguienteHermano = miElemento.nextElementSibling;Si no existe un siguiente hermano, devolverá null.
- Similar al anterior, pero selecciona el hermano anterior del nodo.
const hermanoAnterior = miElemento.previousElementSibling;Si no existe un hermano anterior, devolverá null.
Métodos de verificación y selección
Estos métodos te permiten verificar si un elemento cumple con ciertas condiciones o buscar un ancestro específico:
| Comando | Valor devuelto | Descripción |
|---|---|---|
matches() | true o false | Verifica si el elemento coincide con el selector CSS especificado. |
contains() | true o false | Verifica si un nodo está contenido dentro de otro. |
Este método verifica si un elemento coincide con el selector CSS especificado. Es útil para aplicar condiciones de forma rápida.
const coincide = miElemento.matches('.mi-clase');Devuelve true si el elemento cumple con el selector CSS, y false en caso contrario.
Si no encuentra un elemento que coincida con el selector, devuelve null.
Este método no es una forma directa de selección, pero permite verificar si un nodo está contenido dentro de otro. Es útil cuando necesitas saber si un nodo es un descendiente de otro.
const contiene = contenedor.contains(miElemento);Devuelve true si el nodo es un descendiente del contenedor, y false en caso contrario.