files/ru/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

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

<h2 id="Summary">Описание</h2>

<p>Метод <strong><code>Element.matches()</code></strong> вернёт <code>true</code> или false, в зависимости от того, соответствует ли элемент указанному css-селектору.</p>

<div class="warning">
<p>В некоторых браузерах данный метод имеет нестандартное название - <code>matchesSelector()</code>.</p>
</div>

<h2 id="Syntax">Синтаксис</h2>

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

<ul>
 <li><code>Результат выполнения - <strong>true</strong> или <strong>false</strong>.</code></li>
 <li><strong><code>selectorString</code></strong> - строка, содержащая любой css-селектор, к примеру:<em> <strong>"div"</strong></em>,<em> <strong>"*"</strong></em>,<em> <strong>"#id"</strong></em> и прочие.</li>
</ul>

<h2 id="Example">Пример</h2>

<pre class="brush: html">&lt;div id="one"&gt;Первый подопытный&lt;/div&gt;
&lt;div class="someClass" id="two"&gt;Второй подопытный&lt;/div&gt;

&lt;script type="text/javascript"&gt;

  var coll = document.querySelectorAll("div");
  for (var i = 0, len = coll.length; i &lt; len; i++) {
    if (coll[i].matches(".someClass")) {
      alert(coll[i].id+": Я выжил!");
    }else{
      coll[i].remove();
    }
  }

&lt;/script&gt;
</pre>

<p>Вызов alert сработает только для второго элемента div, которому присвоен класс "someClass".</p>

<h2 id="Исключения">Исключения</h2>

<dl>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>Указанный css-селектор не является допустимым<em> ("/=22=1", "&amp;@*#", "%%''23" и т.п приведут к ошибке).</em></dd>
</dl>

<h2 id="Полифил">Полифил</h2>

<p>Полифил будет работать только в браузерах, поддерживающих метод document.queryselectorAll.</p>

<pre class="brush: js">;(function(e) {
    var matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector;
    !matches ? (e.matches = e.matchesSelector = function matches(selector) {
        var matches = document.querySelectorAll(selector);
        var th = this;
        return Array.prototype.some.call(matches, function(e) {
            return e === th;
        });
    }) : (e.matches = e.matchesSelector = matches);
})(Element.prototype);</pre>

<h2 id="sect1"> </h2>

<h2 id="Спецификация">Спецификация</h2>

{{Specifications}}

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{Compat("api.Element.matches")}}</p>