matches() 方法专用于判断单个元素是否匹配指定 css 选择器，返回布尔值，不遍历子树或兄弟节点，仅检测元素自身；常用于事件委托过滤、配合 closest() 确认容器类型，并需注意兼容性与调用安全。

用 matches() 方法最直接。它专为判断单个元素是否满足某个 CSS 选择器而设计，返回 true 或 false，不查子树、不找兄弟，只看这个元素自己。

matches() 的基本写法

调用方式很简单：element.matches(selector)，其中 selector 是合法的 CSS 选择器字符串。

• div.matches('div') → true（标签匹配）
• btn.matches('.save.btn') → true（同时含两个类）
• input.matches('[required][type="text"]') → true（多属性联合）
• el.matches(':hover') 不代表真实悬停状态，只是逻辑上“如果它被悬停，会匹配”，实际不会触发重绘或监听

常用在事件委托里过滤目标

点击区域大、按钮多时，不必给每个按钮单独绑事件，统一监听父容器，再用 matches() 判断点中的是不是目标类型。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• if (event.target.matches('button.delete')) { /* 删除逻辑 */ }
• if (event.target.matches('a[href^="/user/"]')) { /* 用户页链接拦截 */ }
• 配合 closest() 先往上找容器，再用 matches() 确认类型，比如 event.target.closest('article').matches('.featured')

兼容性与安全调用

现代浏览器都支持 matches()，但旧版 Safari 和 IE 需要前缀方法。也别忘了防错。

• 封装兼容函数：el.matches?.(selector) || el.webkitMatchesSelector?.(selector) || el.msMatchesSelector?.(selector)
• 避免对 null、undefined 或文本节点调用，建议先判断类型：el instanceof Element && el.matches(selector)
• 选择器语法错误会抛 SyntaxError，开发阶段注意检查字符串拼接是否漏引号或符号

别和 querySelector 搞混

matches() 和 querySelector() 完全不同用途：

• div.matches('.box')：问“这个 div 自己是不是 .box？”
• div.querySelector('.box')：问“在这个 div 里面，第一个 .box 是谁？”
• 前者是布尔判断，后者是查找动作；前者只认当前元素，后者遍历后代

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南