Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
Element.closest()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since abril de 2017.
El métodoclosest() de la interfazElement recorre el elemento y sus padres (dirigiéndose hacia la raiz del documento) hasta encontrar un nodo que coincida con elCSS selector especificado.
Sintaxis
js
closest(selectors)Parámetros
selectorsUna cadena deselector de CSS válido para comparar
Elementy sus ancestros.
Valor de retorno
El ancestro más cercanoElement que coincida con losselectors , o él mismo. Si no hay tal elemento devolveránull .
Excepciones
SyntaxErrorDOMExceptionSe lanza si
selectorsno es un selector CSS válido.
Ejemplos
HTML
html
<article> <div> Aquí está div-01 <div> Aquí está div-02 <div>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>// El ancestro más cercano que es un div dentro de un divconsole.log(el.closest("div div")); // <div>// El ancestro más cercano que es un div y tiene un padre articleconsole.log(el.closest("article > div")); // <div>// El ancestro más cercano que no sea un divconsole.log(el.closest(":not(div)")); // <article>Especificaciones
| Specification |
|---|
| 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().