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 July 2015.

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
# 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 objeto Document en el caso del DOM normal.

Véase también