Описание

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

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

Синтаксис

var result = element.matches(selectorString) 
  • Результат выполнения - true или false.
  • selectorString - строка, содержащая любой css-селектор, к примеру: "div", "*", "#id" и прочие.

Пример

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

 

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

Спецификация Статус
DOM
Определение 'Element.prototype.matches' в этой спецификации.
Живой стандарт

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

(Да) имеет название  webkitMatchesSelector

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

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

Метки документа и участники

Внесли вклад в эту страницу: GoodLuck, In4in
Обновлялась последний раз: GoodLuck,