Element.matches() - Web API 接口参考 编辑

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

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

语法

let result = element.matches(selectorString);

• result 的值为 true 或 false.
• 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的补充:

• Polyfill Wikipedia
• What are Polyfills in Javascript ?

规范

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

浏览器兼容性

BCD tables only load in the browser

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.