From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/pt-br/web/api/element/closest/index.html | 127 +++++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 files/pt-br/web/api/element/closest/index.html

(limited to 'files/pt-br/web/api/element/closest/index.html')

diff --git a/files/pt-br/web/api/element/closest/index.html b/files/pt-br/web/api/element/closest/index.html
new file mode 100644
index 0000000000..cfae3b2c98
--- /dev/null
+++ b/files/pt-br/web/api/element/closest/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>O método <code><strong>Element.closest()</strong></code> retorna o ancestral mais próximo, em relação ao elemento atual, que possui o seletor fornecido como parâmetro. No caso de o elemento atual possuir o seletor, o mesmo é retornado.  Caso não exista um ancestral o método retorna <code>null</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><em>selectors</em> é um {{domxref("DOMString")}} contendo uma lista de seletores, por exemplo <code>"p:hover, .toto + q"</code></li>
+ <li><em>element</em> é um {{domxref("Element")}} posicionado no início da árvore de elementos a ser percorrida.</li>
+</ul>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<ul>
+ <li><em>elt</em> é um {{domxref("Element")}} selecionado como ancestral mais próximo  do elemento pelo qual se iniciou a pesquisa. O valor retornado pode ser <code>null</code>.</li>
+</ul>
+
+<h3 id="Exceções">Exceções</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} é lançada caso o parâmetro <code>selectors</code> não seja uma string válida contendo uma lista de seletores.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Esta é a div-01
+    &lt;div id="div-02"&gt;Esta é a div-02
+      &lt;div id="div-03"&gt;Esta é a div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// retorna o elemento com id=div-02
+
+var r2 = el.closest("div div");
+// retorna o ancestral mais próximo que é uma div dentro de uma div, nesse caso div-03 é retornada
+
+var r3 = el.closest("article &gt; div");
+// retorna o ancestral mais próximo que é uma div e tem um article como elemento pai, nesse caso div-01 é retornada
+
+var r4 = el.closest(":not(div)");
+// retorna o ancestral mais próximo que não é uma div, neste caso article é retornado
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Para navegadores que não suportam <code>Element.closest()</code>, mas possuem suporte para <code>element.matches()</code> (ou um prefixo equivalente, ou seja IE9+), o seguinte polyfill pode ser usado: </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;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement;
+        } while (el !== null);
+        return null;
+    };
+</pre>
+
+<p>Contudo, se você de fato precisa dar suporte ao IE 8, você pode usar o polyfill abaixo, o qual é lento mas eficaz. Além disso, ele só garante suporte a seletores CSS 2.1 no IE 8 e ainda pode causar picos de lentidão em websites em produção.</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="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em navegadores</h2>
+
+<div>{{Compat("api.Element.closest")}}</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface {{domxref("Element")}}.</li>
+ <li>
+  <div class="syntaxbox">A sintaxe em Seletores</div>
+ </li>
+ <li>
+  <div class="syntaxbox">Outros métodos que aceitam seletores: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf