JavaScript 中怎么使用 matches 方法检查元素是否匹配特定选择器-js教程-PHP中文网

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

javascript 中怎么使用 matches 方法检查元素是否匹配特定选择器

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

基本用法和语法

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

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

常见使用场景

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

deep-java-review

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

下载

事件委托中识别目标元素：
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。旧版需兼容时可用别名：

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>
}