--- title: Element.matches() slug: Web/API/Element/matches tags: - Element.matches() - js-30-days - matches() translation_of: Web/API/Element/matches ---

{{APIRef("DOM")}}

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

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

语法

let result = element.matches(selectorString);

例子

<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 {{ gecko_minversion_inline("2.0") }}
如果给定的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
{{SpecName('Selectors API Level 2', '#matches', 'Element.matches')}} {{Spec2('Selectors API Level 2')}} Initial definition.

浏览器兼容性

{{Compat("api.Element.matches")}}