HTML中元素的matches()方法用于判断该元素是否匹配指定的CSS选择器。这个方法返回一个布尔值（true或false），表示当前元素是否符合给定的选择器。语法element.matches(selector)element：要检查的DOM元素。selector：一个字符串，表示有效的CSS选择器。示例假设你有一个如下结构的HTML：

2026-05-21 08:39:26 0浏览 收藏

HTML中`element.matches()`是一个高效、简洁的DOM方法，用于精准判断某个元素是否符合指定的CSS选择器，返回布尔值，适用于事件委托、条件校验等场景；它仅支持标准CSS选择器（不支持伪元素和关系符开头）、对空值或非法格式敏感，且在IE9+（含前缀）才可用，现代开发中应优先使用并辅以兼容性封装；值得注意的是，它只基于当前静态DOM结构匹配，无法响应`:hover`、`:focus`等动态状态，正确使用能显著提升代码可读性与健壮性。

element.matches() 是最直接、开销最小的判断方式，只要浏览器不是 IE8 或更早版本，就该优先用它。

element.matches() 的合法输入和典型报错

它只接受标准 CSS 选择器字符串，不支持伪元素（如 ::before）、不支持关系符开头（如 > .child），也不接受空值或仅空白字符。

• 传入 ''、null 或 ' ' 会抛出 DOMException: Failed to execute 'matches' on 'Element': The provided selector is empty
• 属性值含双引号时，要么改用单引号包裹整个选择器，如 element.matches("[data-id='123\"abc']")；要么提前转义，避免解析失败
• 动态拼接选择器时，务必校验变量值：若 type = undefined，'.item[data-type="' + type + '"]' 会变成 .item[data-type="undefined"]，语法合法但逻辑错误

在事件委托中用 matches() 替代松散字符串匹配

比起 e.target.className.includes('btn') 或 e.target.getAttribute('data-action') === 'save'，matches() 一次调用就能组合多个条件，语义清晰且不易误判。

• 正确写法：e.target.matches('button.btn[data-action="save"]:enabled')
• 错误写法：e.target.className === 'btn save' —— 忽略 class 顺序、多余空格、其他 class 干扰
• 注意 e.target 是实际点击的最深节点，如果想捕获“点击区域落在某个容器内任意可操作子项”，应配合 closest() 使用，而不是反复对父级调用 matches()

IE 兼容写法与 polyfill 边界

IE9–10 支持带前缀的 msMatchesSelector()，IE8 及更早版本完全不支持，必须降级处理。现代项目通常忽略 IE8，但若真要兼容，不要自己手写遍历父节点的循环。

• 推荐封装：element.matches?.('selector') || element.msMatchesSelector?.('selector')
• IE8 降级方案只能用 document.querySelectorAll('selector') 手动比对引用，性能差、代码冗长，且无法处理动态状态（如 :hover）
• 切勿把 matches() 当查找工具用——它只返回布尔值，批量筛选请用 querySelectorAll()，否则容易写出低效的 for-loop + matches 组合

最容易被忽略的是选择器的“静态性”：matches() 不会触发 :hover 或 :focus 这类运行时状态的匹配，它只基于当前 DOM 结构和属性做一次性判定。如果你依赖用户交互后的视觉状态做判断，得换思路，比如监听 focusin 或用 document.activeElement 配合 matches()。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~