Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

此文件需要技術審查。看看您能幫什麼忙。

我們的志工尚未將此文章翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!

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 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;            
        };
}

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.

文件標籤與貢獻者

 最近更新: redian,