From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/element/closest/index.html | 145 ++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 files/es/web/api/element/closest/index.html (limited to 'files/es/web/api/element/closest') diff --git a/files/es/web/api/element/closest/index.html b/files/es/web/api/element/closest/index.html new file mode 100644 index 0000000000..ecf35158b5 --- /dev/null +++ b/files/es/web/api/element/closest/index.html @@ -0,0 +1,145 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Elemento + - Referencia + - metodo +translation_of: Web/API/Element/closest +--- +
{{APIRef('Shadow DOM')}}
+ +

El método closest() 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 null.

+ +

Sintaxis

+ +
var closestElement = element.closest(selectors);
+
+ +

Parámetros

+ + + +

Valor del resultado

+ + + +

Excepciones

+ + + +

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ónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("api.Element.closest")}}

+ +

Notas de compatibilidad

+ + +
+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf