Element.matches()

Описание

Метод 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){

e.matches || (e.matches=e.matchesSelector||function(selector){
  var matches = document.querySelectorAll(selector), th = this;
  return Array.prototype.some.call(matches, function(e){
     return e === th;
  });
});

})(Element.prototype);

 

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

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

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

Особенность 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, а не вызывал исключение...

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

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