Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El método Element.closest() devuelve el ascendiente más cercano al elemento actual (o el propio elemento actual) que coincida con el selector proporcionado por parámetro. Si no existe dicho ascendiente, devuelve null.

Sintaxis

var elt = element.closest(selectors);

Parámetros

  • selectors es un DOMString que contiene una lista de selectores como "p:hover, .toto + q"
  • element es el Element en la parte superior del árbol de elementos a tratar.

Valor del resultado

  • elt es el Element ascendiente más cercano al elemento actual. Puede ser nulo.

Excepciones

  • Se lanza una excepción SyntaxError si selectors no es una lista de selectores válida.

Ejemplo

<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>
var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// devuelve el elemento con id=div-02

var r2 = el.closest("div div");  
// devuelve el ascendiente más cercano que sea un div dentro de otro div, que es el propio div-03

var r3 = el.closest("article > div");  
// devuelve el ascendiente más cercano que sea div y tenga un article como padre, aquí es div-01

var r4 = el.closest(":not(div)");
// devuelve el ascendiente más cercano que no sea un div, el article más externo

Polyfill

Para los navegadores que no tengan soporte para Element.closest(), pero sí lo tengan para document.querySelectorAll(), existe un polyfill:

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement)); 
        return el;
    };
}

Especificaciones

Especificación Estado Comentario
DOM
La definición de 'Element.closest()' en esta especificación.
Living Standard Definición inicial.

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 41 Sin soporte 35.0 (35.0) Sin soporte 28 9
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? 35.0 (35.0) Sin soporte ? 9.0

Vea también

Etiquetas y colaboradores del documento

Colaboradores en esta página: AlePerez92
Última actualización por: AlePerez92,