Element.matches()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

语法

js
matches(selectors)
  • result 的值为 truefalse.
  • selectorString 是个 css 选择器字符串。

示例

html
<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>
js
<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() 方法的浏览器,存在以下替代方案

js
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
DOM
# ref-for-dom-element-matches①

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
matches

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.