---
title: Element.closest()
slug: Web/API/Element/closest
tags:
  - API
  - DOM
  - Elemento
  - Referencia
  - metodo
translation_of: Web/API/Element/closest
---
<div>{{APIRef('Shadow DOM')}}</div>

<p>El método <code><strong>closest()</strong></code> de la interfaz {{domxref("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 <code>null</code>.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">var <em>closestElement = element</em>.closest(<em>selectors</em>);
</pre>

<h3 id="Parámetros">Parámetros</h3>

<ul>
 <li><em><code>selectors</code></em> es un {{domxref("DOMString")}} que contiene una lista de selectores como <code>"p:hover, .toto + q"</code></li>
 <li><em><code>element</code></em> es el {{domxref("Element")}} en la parte superior del árbol de elementos a tratar.</li>
</ul>

<h3 id="Valor_del_resultado">Valor del resultado</h3>

<ul>
 <li><code>closestElement</code> es el {{domxref("Element")}} ascendiente más cercano al elemento actual. Puede ser <code>null</code>.</li>
</ul>

<h3 id="Excepciones">Excepciones</h3>

<ul>
 <li>Se lanza una excepción {{exception("SyntaxError")}} si <em><code>selectors</code></em> no es una lista de selectores válida.</li>
</ul>

<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;article&gt;
  &lt;div id="div-01"&gt;Here is div-01
    &lt;div id="div-02"&gt;Here is div-02
      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">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 &gt; 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</pre>

<h2 id="Polyfill">Polyfill</h2>

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

<pre class="brush: js">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 &amp;&amp; el.nodeType === 1);
    return null;
  };
}</pre>

<p>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.</p>

<pre class="brush: js">if (window.Element &amp;&amp; !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 &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
    return el;
  };
}
</pre>

<h2 id="Especificacion" name="Especificacion">Especificación</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<div>
<p>{{Compat("api.Element.closest")}}</p>

<h3 id="Notas_de_compatibilidad">Notas de compatibilidad</h3>

<ul>
 <li>En Edge <code>document.createElement(element).closest(element)</code> devolverá <code>null</code> si el elemento no es el primero del DOM</li>
</ul>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>La interfaz {{domxref("Element")}}.</li>
 <li>
  <div class="syntaxbox"><a href="/es/docs/Web/CSS/Introducción/Selectors">Sintaxis de los Selectores</a></div>
 </li>
 <li>
  <div class="syntaxbox">Otros métodos que toman selectores: {{domxref("element.querySelector()")}} y {{domxref("element.matches()")}}.</div>
 </li>
</ul>