matches() 比 element.tagName 更灵活语义化，支持CSS选择器语法实现复合条件匹配、精准类组合判断、事件委托中跨标签行为过滤，且现代浏览器兼容良好。
用
判定节点比直接读
更灵活、更语义化，尤其在需要复合条件或规避硬编码时优势明显。
匹配逻辑更贴近真实样式规则
只返回大写标签名（如
），无法表达“带特定类、属性或状态的按钮”这类常见判断需求。而
直接复用 CSS 选择器语法，天然支持组合条件：
—— 一次确认标签、类、属性三者同时存在
—— 还能包含伪类，
完全做不到
无需手动拼字符串或多次取属性值再比对，减少出错可能
避免 class 顺序与空格干扰
用
或
容易因空格、顺序、多余 class 导致误判。而
严格按 CSS 匹配规则执行，只认真实存在的类组合：
→
返回
true
→
返回
false
不依赖 class 字符串的拼接方式，也不怕前后空格或换行
事件委托中精准过滤目标元素
在父容器监听点击时，
会漏掉
这类非标准但实际可操作的节点；而
可统一按行为意图定义匹配规则：
—— 捕获所有带 action 的交互元素，不管它是什么标签
—— 跨标签类型 + 状态联合判断
比反复检查
、
、
更简洁、可读性更强
兼容性可控，现代项目几乎无负担
兼容性极好，但能力太基础；
在 IE9+ 有
，主流浏览器早已原生支持。简单封装即可兼顾：
IE8 及更早需降级（如用
遍历比对），但当前已极少需要
比起手写一堆判断逻辑，一行
更轻量、更不易出错
matches()element.tagNameelement.tagName"BUTTON"matches()el.matches('button.btn-primary[data-loading]')el.matches('input[type="email"]:disabled')tagNameclassName.includes('btn')className === 'btn save'matches('.btn.save')matches('.btn.save')matches('.btn.save')e.target.tagName === 'BUTTON'matches()e.target.matches('[data-action]')e.target.matches('button:enabled, a[href]:not([disabled])')tagNamegetAttributeclassList.containstagNamematches()msMatchesSelectorel.matches?.('button[data-role="confirm"]') || el.msMatchesSelector?.('button[data-role="confirm"]')querySelectorAllmatches()