Javascript Element.matches() 函数

Javascript 的 Element.matches() 函数是用来判断一个元素是否匹配一个指定的 CSS 选择器的方法。它返回一个布尔值，表示该元素是否匹配选择器。

语法

element.matches(selectors);

• element：要检查的元素。
• selectors：一个字符串，包含一个或多个 CSS 选择器。

返回值

• true：如果元素匹配选择器。
• false：如果元素不匹配选择器。

例子

假设我们有以下 HTML：

<div id="example" class="container">
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</div>

我们可以使用 Element.matches() 函数来检查该 DIV 元素是否具有指定的 CSS 类名：

const div = document.querySelector('#example');
if (div.matches('.container')) {
  console.log('The element matches the selector.');
} else {
  console.log('The element does not match the selector.');
}

在上例中，Element.matches() 函数将 div 元素与选择器 '.container' 进行比较。由于该元素具有 'container' CSS 类名，因此该函数将返回 true，并打印 'The element matches the selector.'。

兼容性

Element.matches() 函数是一个比较新的方法，它在较老的浏览器中可能不支持。以下是 Element.matches() 函数的浏览器兼容性列表：

| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | | ------- | ------- | ------- | ----------------- | ------- | ------- | | 1 | 12 | 3.5 | 9 | 10 | 3.2 |

结论

Element.matches() 函数是一种非常有用的方法，可以帮助 JavaScript 程序员快速检查元素是否具有指定的 CSS 选择器。虽然它在一些旧的浏览器中可能不支持，但在所有现代浏览器中都可以使用。