files/pt-br/web/api/element/matches/index.html


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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

---
title: Element.matches()
slug: Web/API/Element/matches
translation_of: Web/API/Element/matches
---
<div>{{APIRef("DOM")}}</div>

<p>O método <strong><code>Element.matches()</code></strong> retorna verdadeiro se o elemento puder ser selecionado pela sequência de caracteres específica; caso contrário retorna falso.</p>

<div class="warning">
<p>Diversos navegadores implementam isto, prefixado, sob nome não padronizado <code>matchesSelector()</code>.</p>
</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString);
</pre>

<ul>
 <li><code>result contém o valor de retorno true ou false.</code></li>
 <li><code>selectorString</code> é uma string representando o seletor para teste.</li>
</ul>

<h2 id="Exemplo">Exemplo</h2>

<pre class="brush: html">&lt;ul id="birds"&gt;
  &lt;li&gt;Orange-winged parrot&lt;/li&gt;
  &lt;li class="endangered"&gt;Philippine eagle&lt;/li&gt;
  &lt;li&gt;Great white pelican&lt;/li&gt;
&lt;/ul&gt;

&lt;script type="text/javascript"&gt;
  var birds = document.getElementsByTagName('li');

  for (var i = 0; i &lt; birds.length; i++) {
    if (birds[i].matches('.endangered')) {
      console.log('The ' + birds[i].textContent + ' is endangered!');
    }
  }
&lt;/script&gt;
</pre>

<p>Isto irá logar "The Philippine eagle is endangered!" para o console, desde que o elemento tenha de fato um atributo de classe com o valor <code>endangered</code>.</p>

<h2 id="Exceções">Exceções</h2>

<dl>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>O seletor de string específico é inválido.</dd>
</dl>

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

<p>Para navegadores que não suportam <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>,  mass possuem suporte para <code>document.querySelectorAll()</code>, existe um polyfill:</p>

<pre>if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
            return i &gt; -1;
        };
}</pre>

<h2 id="Especificação">Especificação</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Original support with a non-standard name</td>
   <td>
    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
   </td>
   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td>
   <td>9.0<sup>[3]</sup></td>
   <td>11.5<sup>[4]</sup><br>
    15.0<sup>[1]</sup></td>
   <td>5.0<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Specified version</td>
   <td>{{CompatChrome("34")}}</td>
   <td>{{CompatGeckoDesktop("34")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>21.0</td>
   <td>7.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Original support with a non-standard name</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.9.2")}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Specified version</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Esta feature foi implementada com o nome não padronizado <code>webkitMatchesSelector</code>.</p>

<p>[2] Esta feature foi implementada com o nome não padronizado <code>mozMatchesSelector</code>. Anteriormente para o Gecko 2.0, seletores de string inválido faziam com que retornasse false ao invés de empurrar uma exceção.</p>

<p>[3] Esta feature foi implementada com o nome não padronizado <code>msMatchesSelector</code>.</p>

<p>[4] Esta feature foi implementada com o nome não padronizado <code>oMatchesSelector</code>.</p>