Element.closest()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde abril de 2017.
El método closest() de la interfaz Element recorre el elemento y sus padres (dirigiéndose hacia la raiz del documento) hasta encontrar un nodo que coincida con el CSS selector especificado.
Sintaxis
js
closest(selectors)
Parámetros
selectors-
Una cadena de selector de CSS válido para comparar
Elementy sus ancestros.
Valor de retorno
El ancestro más cercano Element que coincida con los selectors , o él mismo. Si no hay tal elemento devolverá null .
Excepciones
SyntaxErrorDOMException-
Se lanza si
selectorsno es un selector CSS válido.
Ejemplos
HTML
html
<article>
<div id="div-01">
Aquí está div-01
<div id="div-02">
Aquí está div-02
<div id="div-03">Aquí está div-03</div>
</div>
</div>
</article>
JavaScript
js
const el = document.getElementById("div-03");
// El ancestro más cercano con el id de "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">
// El ancestro más cercano que es un div dentro de un div
console.log(el.closest("div div")); // <div id="div-03">
// El ancestro más cercano que es un div y tiene un padre article
console.log(el.closest("article > div")); // <div id="div-01">
// El ancestro más cercano que no sea un div
console.log(el.closest(":not(div)")); // <article>
Especificaciones
| Especificación |
|---|
| DOM # ref-for-dom-element-closest① |
Compatibilidad con navegadores
Notas de compatibilidad
- En Edge 15-18
document.createElement(tagName).closest(tagName)devolveránullsi el elemento no está conectado (directa o indirectamente) al objeto de contexto, por ejemplo el objetoDocumenten el caso del DOM normal.
Véase también
- Referencia de selectores CSS
- Otros métodos
Elementque toman selectores:Element.querySelector(),Element.querySelectorAll()yElement.matches().