matches() 是 element 接口原生方法，用 css 选择器判断元素自身是否匹配，返回布尔值；支持类、id、属性、伪类及组合器，但不反向推导祖先/后代关系，不支持 :hover/:focus 等运行时状态；可用于事件委托精准过滤目标，兼容现代浏览器，ie 需 polyfill。
matches() 方法是 Element 接口原生支持的 DOM 方法，它能直接用一个 CSS 选择器字符串判断当前元素是否匹配该选择器，无需手动遍历父/子节点或解析选择器逻辑。它返回布尔值，天然适合条件验证。
直接调用 matches() 验证单个元素
只需传入标准 CSS 选择器（类名、ID、属性、伪类等），浏览器内部会基于当前元素的结构和状态做完整匹配计算：
-
element.matches('.btn.active[data-role="submit"]')—— 同时检查类、属性和状态 -
element.matches('article > h2:first-of-type')—— 支持组合器与伪类，但注意：它只判断 该元素自身 是否满足整个选择器的“最右端主体”条件（即是否是符合该选择器规则的那个元素），不涉及祖先或后代关系的反向推导 - 不支持复杂运行时状态（如
:hover或:focus）在非交互环境下准确匹配，因为这些依赖实际用户行为
配合事件委托高效验证目标元素
在父容器上监听事件时，可用 matches() 替代一堆 if (e.target.className === '...') 或 e.target.tagName === '...' 判断：
- 例如为所有带
data-action的按钮统一处理点击： -
e.target.matches('[data-action]')→ 真实匹配任意含该属性的元素，包括<button data-action="delete"></button>、<a data-action="edit"></a> - 比
e.target.hasAttribute('data-action')更精准，还能叠加条件：e.target.matches('button[data-action="save"]:enabled')
兼容性处理与 polyfill 注意点
现代浏览器（Chrome 34+、Firefox 32+、Safari 7.1+、Edge 13+）均原生支持；IE 不支持，需 fallback：
- 可检测并补充：
if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector || Element.prototype.msMatchesSelector; } - 注意旧版 WebKit（如 Safari webkitMatchesSelector 对某些伪类（如
:nth-child()）支持不全，建议避免在关键路径中依赖复杂伪类 - 选择器字符串必须语法合法，否则抛
SyntaxError；可先用try...catch包裹或预校验
替代 querySelectorAll + indexOf 的低效写法
以前常写 Array.from(document.querySelectorAll('.item')).indexOf(el) > -1 来判断元素是否属于某组 —— 这会触发全量查询和数组遍历。用 matches() 更轻量：
-
el.matches('.item')一行解决，且不触发重排重绘 - 若需判断是否匹配多个互斥选择器之一，可用逗号分隔：
el.matches('.btn, .link, [role="button"]') - 注意：逗号分隔是“或”关系，但每个子选择器仍需独立满足语法和语义规则
