Element.closest()
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
Element
y 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
SyntaxError
DOMException
-
Se lanza si
selectors
no 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
Specification |
---|
DOM Standard # ref-for-dom-element-closest① |
Compatibilidad con navegadores
BCD tables only load in the browser
Notas de compatibilidad
- En Edge 15-18
document.createElement(tagName).closest(tagName)
devolveránull
si el elemento no está conectado (directa o indirectamente) al objeto de contexto, por ejemplo el objetoDocument
en el caso del DOM normal.
Véase también
- Referencia de selectores CSS
- Otros métodos
Element
que toman selectores:Element.querySelector()
,Element.querySelectorAll()
yElement.matches()
.