matches() 是 DOM 元素原生方法，用于判断元素自身是否完全匹配指定 CSS 选择器；匹配成功返回 true，不匹配返回 false，语法错误则抛出 SyntaxError。
matches() 是 DOM 元素原生方法，直接判断该元素自身是否**完全匹配**传入的 CSS 选择器字符串。它不检查子元素、不向上查找祖先，只看“这个元素自己”能不能被那个选择器选中。
基本用法和返回值
语法简单明确：
element.matches(selectorString)
参数 selectorString 是一个合法的 CSS 选择器（如 '.btn.active[data-role="submit"]'），不是 DOM 节点，也不是正则或字符串模糊匹配。
- 匹配成功 → 返回 true
- 完全不匹配 → 返回 false
- 选择器语法错误 → 抛出 SyntaxError
常见匹配场景示例
假设页面中有这样一个元素：
立即学习“Java免费学习笔记（深入）”；
<button class="btn primary" data-status="ready" disabled>Submit</button>
对它调用 matches() 的结果如下：
-
el.matches('button')→ true（标签名匹配） -
el.matches('.btn')→ true（含 .btn 类） -
el.matches('[data-status]')→ true（存在 data-status 属性） -
el.matches('[data-status="ready"]')→ true（属性值精确匹配） -
el.matches(':disabled')→ true（伪类匹配，支持常用伪类） -
el.matches('.btn.secondary')→ false（缺少 secondary 类） -
el.matches('div')→ false（标签不符）
典型使用场合
这个方法最常出现在需要**精准响应事件目标**的逻辑中，比如事件委托：
document.addEventListener('click', e => {
if (e.target.matches('a.external, button.delete')) {
e.preventDefault();
handleAction(e.target);
}
});
也适用于条件性操作，例如只对特定结构的元素执行样式更新：
if (item.matches('li[data-type="user"]')) {
item.classList.add('highlight');
}
兼容性与降级写法
现代浏览器（Chrome 34+、Firefox 32+、Edge、Safari 7.1+）均原生支持 matches()。旧版 IE 不支持，需手动补全：
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
Element.prototype.msMatchesSelector;
}
这样写可覆盖 IE9+ 及早期 WebKit/Gecko 内核的别名变体。
