1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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>
|
