matches方法用于判断dom元素是否匹配给定css选择器，返回布尔值；支持类名、id、属性选择器等，但不支持相对选择器和伪元素，现代浏览器直接使用element.matches(selector)即可。
matches 方法用于判断一个 DOM 元素是否匹配给定的 CSS 选择器字符串，返回布尔值（true 或 false）。
基本用法
调用方式很简单：在元素上调用 matches()，传入一个合法的 CSS 选择器（如类名、标签名、属性选择器、伪类等）：
-
element.matches('.btn')→ 检查是否含有class="btn" -
element.matches('div#header')→ 是否是<div id="header"> <li> <code>element.matches('[data-active]')→ 是否有data-active属性 -
element.matches(':hover')→ 注意：:hover等动态伪类在 JS 中通常返回false（不反映实时状态）
兼容性与别名
现代浏览器都支持 matches()，但旧版 Chrome/Safari/IE 使用带前缀的 webkitMatchesSelector，Firefox 曾用 mozMatchesSelector。为兼容，可这样封装：
function elementMatches(el, selector) {
return el.matches
? el.matches(selector)
: el.matchesSelector
? el.matchesSelector(selector)
: el.webkitMatchesSelector
? el.webkitMatchesSelector(selector)
: el.mozMatchesSelector
? el.mozMatchesSelector(selector)
: false;
}
不过现在绝大多数项目已无需支持 IE，直接用 el.matches(selector) 即可。
常见使用场景
这个方法特别适合事件委托中精准判断目标元素：
- 点击事件里只对特定按钮做处理：
if (e.target.matches('.delete-btn')) { ... } - 遍历一组元素，筛选符合条件的：
Array.from(document.querySelectorAll('li')).filter(el => el.matches('[data-type="urgent"]')) - 校验表单控件是否属于某组：
input.matches('input[type="email"], input[type="tel"]')
注意点
几个容易出错的地方：
- 选择器必须是**有效的 CSS 选择器**，不能是自定义字符串或含 JS 变量语法（如
`.${cls}`要先拼好再传） - 相对选择器（如
+ .next、~ .sibling）不生效 ——matches()只检查当前元素自身，不涉及兄弟或祖先上下文 - 伪元素（如
::before）不支持，因为它们不是真实 DOM 节点 - 如果传入空字符串或无效选择器，会抛出
SyntaxError
