Element.matches()

在此页

句法
范例
Polyfill
规范
浏览器兼容性
另请参阅
相关话题

matches() method checks to see if the 元素 would be selected by the provided selectorString -- in other words -- checks if the element "is" the selector.

句法

var result = element.matches(selectorString);

参数

selectorString is a string representing the selector to test.

返回值

result 是 布尔 .

异常

SYNTAX_ERR

范例

<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 .

Polyfill

For browsers that do not support Element.matches() or Element.matchesSelector() , but include 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 ||
                              Element.prototype.webkitMatchesSelector;
}

规范

规范	状态	注释
DOM The definition of 'Element.prototype.matches' in that specification.	实时标准	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`匹配`	Chrome 33 33 4 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector`	Edge ≤18 ≤18 ≤18 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector` 12 Alternate Name Alternate Name Uses the non-standard name: `msMatchesSelector`	Firefox 34 34 44 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector` 3.6 Alternate Name Prior to Firefox 4, invalid selector strings caused false to be returned instead of throwing an exception. 见 bug 1119718 for removal. Alternate Name Uses the non-standard name: `mozMatchesSelector`	IE 9 Alternate Name 9 Alternate Name Alternate Name Uses the non-standard name: `msMatchesSelector`	Opera 21 21 15 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector` 不支持 11.5 — 15 Alternate Name Alternate Name Uses the non-standard name: `oMatchesSelector`	Safari 7 7 5 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector`	WebView Android 4.4 4.4 ≤37 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector`	Chrome Android 33 33 18 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector`	Firefox Android 34 34 44 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector` 4 Alternate Name 见 bug 1119718 for removal. Alternate Name Uses the non-standard name: `mozMatchesSelector`	Opera Android 21 21 14 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector` 不支持 11.5 — 14 Alternate Name Alternate Name Uses the non-standard name: `oMatchesSelector`	Safari iOS 8 8 4.2 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector`	Samsung Internet Android 2.0 2.0 1.0 Alternate Name Alternate Name Uses the non-standard name: `webkitMatchesSelector`

图例

完整支持

另请参阅

The syntax of Selectors
Other methods that take selectors: element.querySelector() and element.closest() .

元数据

最后修改： 2020 年 7 月 29 日

在此页

句法

参数

返回值

异常

范例

Polyfill

规范

浏览器兼容性

图例

另请参阅

相关话题