--- title: Element.matches() slug: Web/API/Element/matches translation_of: Web/API/Element/matches ---

{{ APIRef("DOM") }}

Описание

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

В некоторых браузерах данный метод имеет нестандартное название - matchesSelector().

Синтаксис

var result = element.matches(selectorString)

Пример

<div id="one">Первый подопытный</div>
<div class="someClass" id="two">Второй подопытный</div>

<script type="text/javascript">

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

</script>

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

Исключения

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

Полифил

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

;(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);

 

Спецификация

Спецификация Статус
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}} {{Spec2('DOM WHATWG')}}

Поддержка браузерами

{{CompatibilityTable}}

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Поддерживается , но имеет иное название

{{CompatVersionUnknown}} имеет название  webkitMatchesSelector

 {{CompatGeckoDesktop("1.9.2")}} имеет название   mozMatchesSelector [1] 9.0 имеет название msMatchesSelector 11.5 имеет название  oMatchesSelector,
а с 15.0 - webkitMatchesSelector		 5.0 известен под названием webkitMatchesSelector
Unprefix version {{CompatChrome("34")}} {{CompatGeckoDesktop("34")}} {{CompatUnknown}} {{CompatUnknown}} 7.1
Особенность Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Поддерживается , но имеет иное название {{CompatUnknown}} {{CompatGeckoMobile("1.9.2")}} имеет название mozMatchesSelector [1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Unprefix version {{CompatUnknown}} {{CompatGeckoMobile("34")}} {{CompatUnknown}} {{CompatUnknown}} 8

 До появления Gecko 2.0 вызов с недопустимым селектором возвращал  false, а не вызывал исключение...