element.matches(selector)是实例方法，必须调用具体元素对象，不能写成element.matches()或document.matches()；它支持合法css选择器（含伪类），但不支持伪元素、空选择器及ie8–10原生运行。
直接用 element.matches(selector) 就行，现代浏览器全支持，IE 完全不认，别在 IE8–10 里指望它原生工作。
为什么不能写 Element.matches()？
因为 matches() 是实例方法，必须绑在具体元素上。写成 Element.matches('.btn') 会报 TypeError: Cannot read property 'matches' of undefined。
- ✅ 正确：
document.querySelector('button').matches('.btn') - ❌ 错误：
Element.matches('.btn')或document.matches('.btn') - 它不接受空字符串、
null或纯空白，否则抛DOMException: The provided selector is empty - 属性值含双引号时，要么用单引号包整个选择器：
el.matches("[data-id='abc\"123']")，要么提前转义
matches() 能匹配哪些选择器？哪些不行？
它走的是浏览器原生 CSS 选择器引擎，所以合法的 CSS 选择器基本都行，但有硬边界：
- ✅ 支持：
'.active'、'button[disabled]'、'input:invalid'（注意：结果取决于当前有效性状态，不是静态语法）、'article > h2:first-of-type' - ❌ 不支持伪元素：
'::before'、'::after'—— 这些根本无法被 JS 获取引用，调用即报错 - ⚠️
:hover、:focus等运行时伪类：语法上不报错，但匹配结果不可靠（比如el.matches(':hover')在非鼠标悬停时永远是false） - ⚠️ 动态拼接时容易出错：
el.matches(`[data-type="${type}"]`)中若type是undefined，会变成[data-type="undefined"]，语法合法但逻辑失效
事件委托中常见误用和替代方案
很多人以为 e.target.matches('.card .delete') 能捕获点在 .card 内任意位置的删除操作，其实它只看点击的那个最深节点是否**自身**匹配——点到 .card > span > button.delete 里的 span，就直接 false 了。
- ✅ 想捕获“点在某个容器内任意子项”：用
e.target.closest('.card')判断容器是否存在 - ✅ 想精准过滤“目标是某类按钮”，且必须是按钮本身：用
e.target.matches('button.delete')+e.target === e.currentTarget或监听在按钮上 - ✅ 想组合条件又不想写一堆
classList.contains+hasAttribute：直接e.target.matches('button[data-action="save"]:enabled') - ❌ 别用
matches()做批量查找：想取所有.item.active，该用document.querySelectorAll('.item.active')，不是循环每个元素调matches()
IE 兼容写法怎么写才不踩坑？
IE9–10 用 msMatchesSelector，IE11+ 已支持 matches，但早期文档模式可能行为异常。别用 UA 检测，用特性检测：
- ✅ 推荐封装：
el.matches?.(selector) || el.msMatchesSelector?.(selector) || false - ⚠️ 别写
typeof el.matches === 'function'—— IE11 在混杂模式下可能暴露该方法但返回错误结果 - ❌ IE8 及更早：没有靠谱 polyfill，
querySelectorAll+ 遍历比对引用性能差、无法处理动态状态，真要兼容就换思路（比如加 class 标记或用事件冒泡兜底） - 如果你用了
core-js，确认版本 ≥ 3.30，默认已补全Element.prototype.matches
最容易被忽略的是它的“静态性”：它不做重排、不触发状态更新，只是对当前 DOM 快照做一次逻辑判断。如果你依赖用户交互后的视觉反馈（比如 :checked 的变化），得配合事件监听或属性读取，不能只靠 matches() 猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
