Element.closest()

El método closest() de la interfaz Element 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 closestElement = 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

  • closestElement es el Element ascendiente más cercano al elemento actual. Puede ser null.

Excepciones

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

Ejemplo

HTML

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

JavaScript

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article

Polyfill

Para los navegadores que no tengan soporte para Element.closest(), pero sí lo tengan para document.querySelectorAll() (o un equivalente prefijado, es decir IE9+), existe un polyfill:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

Sin embargo, si realmente se necesita soporte para IE 8, entonces el siguiente polyfill servirá para conseguirlo de forma muy lenta, pero lo hará. Sin embargo, sólo admitirá selectores CSS 2.1 en IE 8, puede causar picos severos de retraso en sitios web en producción.

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;
  };
}

Especificación

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

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
closestChrome Soporte completo 41Edge Soporte completo 15Firefox Soporte completo 35IE Sin soporte NoOpera Soporte completo 28Safari Soporte completo 6WebView Android Soporte completo 41Chrome Android Soporte completo 41Firefox Android Soporte completo 35Opera Android Soporte completo SiSafari iOS Soporte completo 9Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

Notas de compatibilidad

  • En Edge document.createElement(element).closest(element) devolverá null si el elemento no es el primero del DOM

Ver también