Element.matches()
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
var result = element.matches(selectorString);
result
holds the return valuetrue
orfalse
.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; }; }
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
.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/element/matches