matches() 是标准 DOM API，返回布尔值表示元素是否匹配 CSS 选择器；主流浏览器均支持，IE 需 fallback 到 msMatchesSelector()；不支持伪元素，注意 XSS 风险与选择器语法合法性。
matches() 方法在现代浏览器中直接可用
Element.matches() 是标准 DOM API，不需要 polyfill 或额外库，所有主流浏览器（Chrome 34+、Firefox 32+、Safari 7.1+、Edge 12+）都支持。它返回布尔值，表示当前元素是否匹配给定的 CSS 选择器字符串。
常见误用是传入无效选择器或忽略返回值类型——它只认合法的 document.querySelector() 级别语法，不支持伪元素（如 ::before）或某些实验性伪类（如 :has() 在旧版 Safari 中不可用）。
- 正确写法：
element.matches('.btn.active[data-role="submit"]') - 错误写法：
element.matches('div > p:first-child::marker')（含伪元素，抛SyntaxError） - 注意空格：
element.matches('li .title')是后代选择器，不是子元素；要子元素请用'li > .title'
IE 不支持 matches()，需 fallback 到 msMatchesSelector()
IE9–11 使用私有方法 element.msMatchesSelector()，行为一致但名称不同。不能直接检测 typeof element.matches === 'function' 就调用——IE11 下 matches 不存在，会报 TypeError。
安全写法是先检查存在性再调用：
立即学习“前端免费学习笔记（深入）”；
function elementMatches(el, selector) {
return el.matches
? el.matches(selector)
: el.msMatchesSelector
? el.msMatchesSelector(selector)
: false;
}
注意：IE8 及更早版本完全不支持任何类似 API，必须用 querySelectorAll + 遍历比对（性能差，仅兜底）。
matches() 和 closest() 的关键区别：方向与语义
matches() 只判断“自己是否匹配”，不查找祖先；而 closest() 是向上找“第一个匹配的祖先（含自身）”。两者常被混淆，尤其在事件委托中。
- 想确认点击目标是不是按钮？用
event.target.matches('button[type="submit"]') - 想确认点击是否发生在某个表单内？用
event.target.closest('form')，不是matches() -
matches()不触发重排重绘，纯逻辑判断；closest()需遍历父链，但现代引擎已高度优化
动态选择器字符串拼接时容易 XSS 或语法错误
如果把用户输入、URL 参数或 dataset 值直接拼进 matches() 字符串，可能产生非法选择器或注入风险。例如：el.matches('[data-id="' + userId + '"]') —— 当 userId 含双引号或方括号时会崩溃或误匹配。
解决方式只有两个：严格校验或转义。推荐用正则白名单限制字符范围（如只允许字母、数字、下划线、短横线）：
function isValidSelectorId(str) {
return /^[a-z0-9_-]+$/i.test(str);
}
if (isValidSelectorId(userId)) {
el.matches('[data-id="' + userId + '"]');
}
不要试图用 JSON.stringify 或通用 HTML 转义——CSS 选择器不是 HTML 文本，规则完全不同。
真正麻烦的是嵌套复杂选择器的运行时构造，比如带属性值、伪类、组合器的混合表达式。这种场景建议提前定义好命名规则，避免现场拼接。
