W3cubDocs

/DOM

element.matches

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

Internet Explorer implements this, prefixed, under the non-standard name msMatchesSelector().

Syntax

var 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:

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
}

However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (i.e. IE9+ support).

if (!Element.prototype.matches) {
    Element.prototype.matches = Element.prototype.msMatchesSelector;
}

Specification

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

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Original support with a non-standard name	(Yes)^[1]	(Yes)	3.6 (1.9.2)^[2]	9.0^[3]	11.5^[4] 15.0^[1]	5.0^[1]
Specified version	34	(Yes)	34 (34)	No	21.0	7.1

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Original support with a non-standard name	?	(Yes)	1.0 (1.9.2)^[2]	?	?	?
Specified version	?	(Yes)	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.