如果元素被指定的选择器字符串选择,Element.matches()  方法返回true; 否则返回false。

有一些浏览器使用前缀, 在非标准名称  matchesSelector () 下实现了这个方法!

语法

let result = element.matches(selectorString);
  • result 的值为 truefalse.
  • selectorString 是个css选择器字符串.

例子

<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>
  
<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.mozMatchesSelector("div")) {
      alert("Match!");
    }
  </script>

会显示弹出框,因为"div"选择器可以选择到el元素.

异常

SYNTAX_ERR
如果给定的css选择器无效. 在 Gecko 2.0之前,该方法会返回false,2.0之后,会直接抛出异常.

替代方案(Polyfill)

对于不支持 Element.matches() 或Element.matchesSelector(),但支持document.querySelectorAll()方法的浏览器,存在以下替代方案

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

关于Polyfill的补充:

规范

Specification Status Comment
Selectors API Level 2
Element.matches
Obsolete Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 34
Full support 34
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Edge Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: msMatchesSelector
Firefox Full support 34
Full support 34
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Full support 3.6
Notes Alternate Name
Notes Prior to Firefox 4, invalid selector strings caused false to be returned instead of throwing an exception.
Notes See bug 1119718 for removal.
Alternate Name Uses the non-standard name: mozMatchesSelector
IE Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: msMatchesSelector
Opera Full support 21
Full support 21
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
No support 11.5 — 15
Alternate Name
Alternate Name Uses the non-standard name: oMatchesSelector
Safari Full support 7
Full support 7
Full support 5
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
WebView Android Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Chrome Android Full support 34
Full support 34
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: msMatchesSelector
Firefox Android Full support 34
Full support 34
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Full support 4
Notes Alternate Name
Notes See bug 1119718 for removal.
Alternate Name Uses the non-standard name: mozMatchesSelector
Opera Android Full support 21
Full support 21
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
No support 11.5 — 15
Alternate Name
Alternate Name Uses the non-standard name: oMatchesSelector
Safari iOS Full support 8
Full support 8
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector
Samsung Internet Android Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: webkitMatchesSelector

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

文档标签和贡献者

最后编辑者: zhuangyin,