matches() 是 element 接口原生方法，用于判断元素是否匹配指定 css 选择器并返回布尔值；支持类名、标签、属性、伪类等标准选择器，但不支持伪元素和部分实验性伪类；常用于插入前预校验和事件委托中快速过滤目标元素。
matches() API 是 Element 接口的原生方法，可在不修改或访问 DOM 树结构的前提下，判断一个元素是否满足指定 CSS 选择器。它返回布尔值，纯粹用于“预测性匹配”，非常适合在创建节点后、插入前做校验，或在事件委托中快速过滤目标元素。
直接调用 matches() 判断现有元素
只要拿到元素引用（无论是否已挂载），就能立即调用：
const div = document.createElement('div');
div.className = 'btn primary large';
console.log(div.matches('.btn')); // true
console.log(div.matches('.primary')); // true
console.log(div.matches('div.btn')); // true
console.log(div.matches('span')); // false
console.log(div.matches('[class~="large"]')); // true（属性选择器也支持）
注意：matches() 支持绝大多数标准 CSS 选择器，包括类名、标签名、属性、伪类（如 :disabled、:checked），但不支持伪元素和部分实验性伪类（如 :has() 在部分旧浏览器中不可用）。
配合 document.createElement() 做插入前预校验
常见于动态生成节点后、决定是否 append 的场景：
- 构建元素 → 设置属性/类名 → 调用
matches()→ 按结果分支处理 - 避免先插入再移除，减少重排重绘和 DOM 波动
function createElIfMatches(selector) {
const el = document.createElement('article');
el.classList.add('post', 'featured');
el.dataset.status = 'published';
if (el.matches(selector)) {
return el; // 符合条件才返回，供后续使用
}
return null;
}
const node = createElIfMatches('article.featured[data-status="published"]');
if (node) {
document.body.appendChild(node);
}
在事件委托中替代 parentNode 遍历
监听父容器时，可用 matches() 快速确认 event.target 是否命中目标选择器：
- 比手动向上遍历
parentNode更简洁安全 - 无需担心元素是否在文档中 —— 只要 target 是 Element 实例即可调用
document.body.addEventListener('click', (e) => {
if (e.target.matches('button.delete, .remove-btn')) {
handleDelete(e.target);
}
});
兼容性与后备方案
现代浏览器均支持 Element.prototype.matches，旧版需兼容时可使用别名：
-
element.matchesSelector（早期 WebKit/Gecko） -
element.msMatchesSelector（IE10+）
推荐封装一次检测逻辑：
const matches = (el, selector) => {
return el.matches
? el.matches(selector)
: el.matchesSelector?.(selector) ||
el.msMatchesSelector?.(selector) ||
false;
};
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
