MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.closest()

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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
The definition of 'Element.closest()' in that specification.
Living Standard Definición inicial.

Compatibilidad con navegadores

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

Vea también

Etiquetas y colaboradores del documento

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