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

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

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

语法

js
matches(selectors)
  • result 的值为 true 或 false.
  • 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①

浏览器兼容性