この記事は技術レビューを必要としています。ぜひご協力ください。
この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください！
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);
resultholds the return valuetrueorfalse.selectorStringis 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.