JavaScript中的.matches()方法详解|极客笔记

JavaScript中的.matches()方法详解

在JavaScript中，.matches()方法是用来检查一个元素是否与指定的选择器相匹配的方法。它返回一个布尔值，表示是否匹配。这个方法通常用于获取所有匹配指定选择器的元素。

语法

.matches()方法的语法如下：

element.matches(selector)

element：要检查的元素
selector：一个字符串，表示要检查的选择器

示例代码

下面我们来看几个示例，来演示.matches()方法的用法：

<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>

<div id="example" class="demo">This is a demo</div>

<script>
const element = document.getElementById('example');
const isMatch = element.matches('.demo');
console.log(isMatch); // 输出 true
</script>

</body>
</html>

在这个示例中，我们首先获取了id为example的元素，并使用.matches()方法检查它是否与类名为demo的元素匹配。由于这个元素拥有demo类名，所以输出为true。

示例结果

true

更多示例

接下来看一个更加复杂的示例：

<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>

<div class="example-one">This is example one</div>
<div class="example-two">This is example two</div>
<div class="example-three">This is example three</div>

<script>
const elements = document.querySelectorAll('.example-one, .example-two');
elements.forEach(element => {
  const isMatch = element.matches('.example-one');
  console.log(isMatch);
});
</script>

</body>
</html>

在这个示例中，我们使用document.querySelectorAll()方法选中所有类名为example-one和example-two的元素，并使用.forEach()方法遍历每个元素。然后我们使用.matches()方法检查每个元素是否匹配类名为example-one的元素。由于遍历的元素中只有类名为example-one的元素匹配，所以输出为true和false。