matches方法用于检查单个DOM元素是否匹配指定CSS选择器，返回布尔值，不依赖父节点或位置，支持标签名、类名、ID、属性及部分伪类，但不支持伪元素和部分运行时伪类。
matches 方法用于检查当前 DOM 元素是否匹配给定的 CSS 选择器字符串，返回布尔值。它不依赖父节点或位置，只看元素自身是否满足选择器条件。
基本用法和语法
调用方式很简单：element.matches(selector)，其中 selector 是一个合法的 CSS 选择器字符串（如 "div"、".btn.active"、"[data-id='123']"）。浏览器会 internally 解析并判断该元素是否符合规则。
- 支持大多数标准选择器：标签名、类名、ID、属性、伪类（如
:hover仅在当前上下文中逻辑判断，不依赖真实状态） - 不支持伪元素（如
::before）和部分运行时不可判定的伪类（如:focus-within） - 如果选择器语法错误，会抛出
SyntaxError
常见实用场景
常用于事件委托中快速过滤目标元素，或做条件性逻辑分支。
- 点击按钮时判断是否为“删除”类：
if (event.target.matches('.delete-btn')) { ... } - 遍历一组元素并筛选出带特定属性的：
Array.from(document.querySelectorAll('button')).filter(btn => btn.matches('[data-action="save"]')) - 配合
closest()使用：先向上找最近的容器，再用matches确认是否属于某类区域
兼容性和写法注意
现代浏览器原生支持 matches()，旧版 Chrome/Safari/IE 需用前缀方法 webkitMatchesSelector 或 msMatchesSelector。可简单封装兼容函数：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
function matches(el, selector) {
return el.matches
? el.matches(selector)
: el.webkitMatchesSelector
? el.webkitMatchesSelector(selector)
: el.msMatchesSelector(selector);
}
注意：不要对 null 或非 Element 对象调用，否则报错；建议先做类型判断或使用可选链（el?.matches?.(selector)）。
与 querySelector 的关键区别
matches() 是实例方法，作用于单个已存在的元素；querySelector() 是查找方法，在子树中搜索符合条件的第一个元素。两者目的不同，不能互相替代。
-
div.matches('.container')→ 判断这个div自己是不是.container -
parent.querySelector('.container')→ 在parent内部找第一个.container - 即使
div是.container的子元素，div.matches('.container')仍返回false
