diff options
Diffstat (limited to 'files/pt-br/web/api/element/closest/index.html')
| -rw-r--r-- | files/pt-br/web/api/element/closest/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
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"><article> + <div id="div-01">Esta é a div-01 + <div id="div-02">Esta é a div-02 + <div id="div-03">Esta é a div-03</div> + </div> + </div> +</article></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 > 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 && !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; + }; +} +</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> |