Element: matches() 方法

Baseline 已广泛支持

该特性已非常成熟,可在多种设备和浏览器版本上使用。自 2017 年 4 月以来,它已在各大浏览器上可用。

Element 接口的 matches() 方法用于测试该元素是否会匹配指定的 CSS 选择器

语法

js
matches(selectors)

参数

选择器 (selectors)

包含有效 CSS 选择器 的字符串,用于与 Element 进行匹配测试。

返回值

如果 Element 匹配 selectors,则返回 true。否则,返回 false

异常

SyntaxError DOMException

如果 selectors 无法被解析为 CSS 选择器列表,则会抛出此错误。

示例

HTML

html
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

JavaScript

js
const birds = document.querySelectorAll("li");

for (const bird of birds) {
  if (bird.matches(".endangered")) {
    console.log(`The ${bird.textContent} is endangered!`);
  }
}

这将会在控制台输出 "The Philippine eagle is endangered!",因为该元素确实有一个值为 endangeredclass 属性。

规范

规范
DOM
# ref-for-dom-element-matches①

浏览器兼容性

另见