element.matches() 方法通过调用 element.matches(selector) 并传入 css 选择器字符串，返回布尔值来判断当前元素是否匹配该选择器。它直接基于元素的属性、类名和标签名进行比对，若匹配则返回 true，否则返回 false。

matches() 与 querySelectorAll() 的筛选逻辑有何不同

matches() 是实例方法，仅针对单个元素进行判断；而 querySelectorAll() 是文档级方法，用于查找所有匹配的元素。前者适合在事件处理中快速验证目标元素，后者适合批量获取节点列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Matches Demo</title>
</head>
<body>
    <div id="app" class="container active">
        <p class="text highlight">Hello World</p>
    </div>

    <script>
        const p = document.querySelector('.highlight');
        console.log(p.matches('.highlight')); // true
        console.log(p.matches('#app'));      // false
        console.log(p.matches('div'));       // false
        console.log(p.matches('p.text'));    // true
    </script>
</body>
</html>

父元素如何判断子元素是否匹配特定选择器

在父元素的事件监听中，可以通过 event.target.matches() 来判断触发事件的子元素是否符合预期选择器。这种方式避免了手动遍历 DOM 树，提高了事件委托的效率。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="list">
        <li data-type="item">Item 1</li>
        <li data-type="item">Item 2</li>
    </ul>

    <script>
        const list = document.getElementById('list');
        list.addEventListener('click', function(event) {
            if (event.target.matches('li[data-type="item"]')) {
                console.log('Clicked item:', event.target.textContent);
            }
        });
    </script>
</body>
</html>

当选择器包含伪类时 matches() 的行为如何

matches() 方法不支持伪类选择器（如 :hover、:first-child），因为这些状态依赖于动态样式或布局计算。如果传入包含伪类的选择器，该方法会抛出 SyntaxError 异常。开发者应使用其他 API 如 getComputedStyle() 来检查动态样式。

,