matches() 比 element.tagname 更灵活语义化，支持css选择器语法实现复合条件匹配、精准类组合判断、事件委托中跨标签行为过滤，且现代浏览器兼容良好。

用 matches() 判定节点比直接读 element.tagName 更灵活、更语义化，尤其在需要复合条件或规避硬编码时优势明显。

匹配逻辑更贴近真实样式规则

element.tagName 只返回大写标签名（如 "BUTTON"），无法表达“带特定类、属性或状态的按钮”这类常见判断需求。而 matches() 直接复用 CSS 选择器语法，天然支持组合条件：

• el.matches('button.btn-primary[data-loading]') —— 一次确认标签、类、属性三者同时存在
• el.matches('input[type="email"]:disabled') —— 还能包含伪类，tagName 完全做不到
• 无需手动拼字符串或多次取属性值再比对，减少出错可能

避免 class 顺序与空格干扰

用 className.includes('btn') 或 className === 'btn save' 容易因空格、顺序、多余 class 导致误判。而 matches('.btn.save') 严格按 CSS 匹配规则执行，只认真实存在的类组合：

• <button class="save btn"></button> → matches('.btn.save') 返回 true
• <button class="btn-outline btn"></button> → matches('.btn.save') 返回 false
• 不依赖 class 字符串的拼接方式，也不怕前后空格或换行

事件委托中精准过滤目标元素

在父容器监听点击时，e.target.tagName === 'BUTTON' 会漏掉 <span data-action="submit"></span> 这类非标准但实际可操作的节点；而 matches() 可统一按行为意图定义匹配规则：

• e.target.matches('[data-action]') —— 捕获所有带 action 的交互元素，不管它是什么标签
• e.target.matches('button:enabled, a[href]:not([disabled])') —— 跨标签类型 + 状态联合判断
• 比反复检查 tagName、getAttribute、classList.contains 更简洁、可读性更强

兼容性可控，现代项目几乎无负担

tagName 兼容性极好，但能力太基础；matches() 在 IE9+ 有 msMatchesSelector，主流浏览器早已原生支持。简单封装即可兼顾：

• el.matches?.('button[data-role="confirm"]') || el.msMatchesSelector?.('button[data-role="confirm"]')
• IE8 及更早需降级（如用 querySelectorAll 遍历比对），但当前已极少需要
• 比起手写一堆判断逻辑，一行 matches() 更轻量、更不易出错