matches方法用于判断DOM元素是否匹配指定CSS选择器，返回布尔值；支持主流CSS3选择器，不支持伪元素和语法错误会抛异常；常用于事件委托、条件判断等场景；现代浏览器原生支持，旧版需兼容处理。

matches 方法用于判断一个 DOM 元素是否匹配给定的 CSS 选择器字符串，返回布尔值（true 或 false），是现代浏览器中检查元素状态最直接的方式之一。

基本用法和语法

调用方式很简单：在任意元素对象上调用 element.matches(selector)，其中 selector 是标准 CSS 选择器（如类名、标签、属性、伪类等）。

• 支持大多数 CSS3 选择器，包括 .btn、div[data-id]、:hover（注意：:hover 在脚本中检测的是当前状态，非实时悬停）
• 不支持部分伪元素（如 ::before）和某些实验性选择器
• 若选择器语法错误，会抛出 SyntaxError

常见使用场景

常用于事件委托、条件渲染、表单验证等逻辑中，避免频繁遍历父元素或重复查询。

• 事件委托中识别目标元素：
  if (event.target.matches('.delete-btn')) { /* 执行删除 */ }
• 检查是否属于某组元素：
  if (el.matches('input[type="text"], textarea')) { /* 统一处理文本输入 */ }
• 结合 closest() 做向上匹配（虽然 matches 本身只查自身）：
  if (el.closest('.card')?.matches('.card.active')) { /* 卡片是否激活 */ }

兼容性与降级方案

现代浏览器（Chrome 34+、Firefox 34+、Edge 12+、Safari 7.1+）均原生支持 matches。旧版需兼容时可用别名：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

立即学习“Java免费学习笔记（深入）”；

• Firefox 早期用 mozMatchesSelector
• Chrome/Safari 旧版用 webkitMatchesSelector
• IE9–11 支持 msMatchesSelector

推荐封装一个安全调用函数：

function elementMatches(el, selector) {<br>
  if (!el || !selector) return false;<br>
  return el.matches<br>
    ? el.matches(selector)<br>
    : el.matchesSelector<br>
      ? el.matchesSelector(selector)<br>
      : el.msMatchesSelector<br>
        ? el.msMatchesSelector(selector)<br>
        : false;<br>
}

注意事项

容易忽略但关键的细节：

• matches 只检测**当前元素自身**，不涉及子元素或祖先元素
• 选择器必须是**完整、合法的字符串**，不能是 NodeList 或其他对象
• 相对选择器（如 + .sibling）无效，因为没有上下文节点关系
• 动态添加的 class 或属性，只要已更新到 DOM，就能被正确匹配