This article needs a technical review. How you can help.

The Element.matches() method returns true if the element would be selected by the specified selector string; otherwise, returns false.

Several browsers implement this, prefixed, under the non-standard name matchesSelector().

Syntax

result = element.matches(selectorString) 
  • result holds the return value true or false.
  • selectorString is a string representing the selector to test.

Example

<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

<script type="text/javascript">
  var birds = document.getElementsByTagName('li');

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

This will log "The Philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.

Exceptions

SYNTAX_ERR
The specified selector string is invalid.

Polyfill

For browsers that do not support Element.matches() or Element.matchesSelector(), but carry support for document.querySelectorAll(), a polyfill exists:

​function matches(elm, selector) {
    var matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),
        i = matches.length;
    while (--i >= 0 && matches.item(i) !== elm) {}
    return i > -1;
}

Specification

Specification Status Comment
DOM
The definition of 'Element.prototype.matches' in that specification.
Living Standard Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Original support with a non-standard name

(Yes)[1]

3.6 (1.9.2)[2] 9.0[3] 11.5[4]
15.0[1]
5.0[1]
Specified version 34 34 (34) ? 21.0 7.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Original support with a non-standard name ? 1.0 (1.9.2)[2] ? ? ?
Specified version ? 34.0 (34) ? ? 8

[1] This feature was implemented with the non-standard name webkitMatchesSelector.

[2] This feature was implemented with the non-standard name mozMatchesSelector. Prior to Gecko 2.0, invalid selector strings caused false to be returned instead of throwing an exception.

[3] This feature was implemented with the non-standard name msMatchesSelector.

[4] This feature was implemented with the non-standard name oMatchesSelector.

Document Tags and Contributors

 Last updated by: mrenty,