HTML DOM matches() 方法（手把手讲解）

HTML DOM matches() 方法详解：精准匹配元素的选择器

在前端开发中，我们经常需要判断某个 DOM 元素是否符合特定的选择器规则。比如，判断一个按钮是否带有 class="btn-primary"，或者某个 div 是否是某个特定层级结构中的子元素。这时候，HTML DOM matches() 方法 就派上用场了。它能让你用简洁的代码完成“是否匹配”的判断，而无需手动遍历类名或属性。

这个方法是 Element 接口的一个实例方法，它接受一个 CSS 选择器字符串作为参数，返回布尔值：true 表示匹配成功，false 表示不匹配。它的核心价值在于：无需额外的 DOM 操作，直接判断元素是否符合某个选择器模式。

举个生活中的例子：想象你在图书馆找一本书。你不需要翻遍所有书架，而是先看这本书的封面标签（相当于 CSS 选择器），然后直接判断手里的书是否匹配这个标签。matches() 就是这个“标签核对”动作的代码实现。

语法与基本用法

matches() 方法的语法非常简单：

element.matches(selector)

• element：一个 DOM 元素对象，比如通过 document.getElementById() 获取的节点。
• selector：一个合法的 CSS 选择器字符串，如 .btn、[data-type="submit"]、div.container > p 等。
• 返回值：true 或 false，表示该元素是否符合给定的选择器。

示例 1：基础匹配判断

// 获取一个按钮元素
const button = document.querySelector('#submit-btn');

// 判断该按钮是否具有 class="btn-primary"
if (button.matches('.btn-primary')) {
  console.log('这个按钮是主按钮样式');
} else {
  console.log('这个按钮不是主按钮样式');
}

💡 注释说明：document.querySelector('#submit-btn') 从页面中找到 id 为 submit-btn 的元素。matches('.btn-primary') 会检查该元素是否在 CSS 中被 .btn-primary 选择器选中。如果元素的 class 包含 btn-primary，则返回 true。

支持的 CSS 选择器类型

matches() 方法支持几乎所有标准的 CSS 选择器语法，这意味着你可以用它做非常复杂的判断。

常见选择器类型一览：

⚠️ 注意：matches() 不支持某些伪类如 :nth-child()、:first-of-type 的动态计算，因为它们依赖于元素在 DOM 中的位置，而 matches() 只关心当前元素是否符合选择器规则。

实际应用场景：表单验证与动态样式控制

在实际项目中，HTML DOM matches() 方法常用于表单验证、事件委托和动态样式管理。

案例 1：表单提交前的字段验证

假设你有一个表单，希望在用户点击提交按钮前，检查是否有必填字段被忽略。

// 获取所有输入框
const inputs = document.querySelectorAll('input, textarea, select');

// 遍历每个输入框，判断是否为必填字段
inputs.forEach(input => {
  // 如果字段有 required 属性，且为空，则视为未填写
  if (input.hasAttribute('required') && !input.value.trim()) {
    // 使用 matches 判断是否为特定类型（如 email、tel）
    if (input.matches('[type="email"]')) {
      alert('请输入有效的邮箱地址');
    } else if (input.matches('[type="tel"]')) {
      alert('请输入正确的电话号码');
    } else {
      alert('请填写此必填项');
    }
    // 阻止表单提交
    event.preventDefault();
  }
});

💡 注释说明：这里用 matches('[type="email"]') 精确判断当前输入框是否为邮箱类型，从而给出更具体的错误提示。这种写法比手动判断 input.type === 'email' 更灵活，也更符合 CSS 选择器的语义。

与 querySelector 的区别：选择 vs 判断

初学者容易混淆 matches() 和 querySelector() 的功能。它们看似相似，实则用途完全不同。

示例对比

// 假设有如下 HTML 结构
// <div class="container">
//   <button id="save" class="btn btn-primary">保存</button>
// </div>

const button = document.getElementById('save');

// matches()：判断当前元素是否匹配
console.log(button.matches('.btn'));           // true
console.log(button.matches('.btn-primary'));   // true
console.log(button.matches('#save'));          // true

// querySelector()：从文档中查找元素
const foundButton = document.querySelector('.btn-primary');
console.log(foundButton === button);           // true（找到的是同一个元素）

✅ 小结：matches() 是“检查”动作，querySelector() 是“查找”动作。前者用于判断，后者用于获取。

事件委托中的高效使用

在事件委托中，我们常需要判断事件源元素是否满足某种条件。这时使用 matches() 能极大简化代码。

案例：按钮点击事件委托

// 为父容器绑定点击事件，通过事件冒泡监听所有子按钮
document.getElementById('action-container').addEventListener('click', function (event) {
  // 判断点击的目标元素是否是按钮
  if (event.target.matches('button')) {
    console.log('点击了一个按钮');
  }

  // 进一步判断按钮类型
  if (event.target.matches('.btn-danger')) {
    console.log('点击了危险操作按钮，确认后再执行');
  }

  // 判断是否是提交按钮
  if (event.target.matches('[type="submit"]')) {
    console.log('正在提交表单');
  }
});

💡 注释说明：事件对象的 target 属性指向实际触发事件的元素。通过 matches() 判断其是否为按钮、危险按钮或提交按钮，可以避免写多个 if (element.className === ...) 逻辑，代码更清晰、可维护性更强。

兼容性与注意事项

matches() 方法在现代浏览器中广泛支持，包括 Chrome、Firefox、Safari、Edge 等。但在一些旧版浏览器（如 IE 9 及以下）中不支持。

兼容写法（带 polyfill）

// 兼容性处理：为不支持 matches 的浏览器添加 polyfill
if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

// 现在可以安全使用 matches()
const element = document.querySelector('.my-class');
if (element.matches('.my-class')) {
  console.log('匹配成功');
}

📌 提示：虽然现代项目基本无需考虑 IE，但如果你的项目需要兼容旧浏览器，建议使用 matches 的兼容性封装。

总结：掌握 matches()，让代码更优雅

HTML DOM matches() 方法 是一个看似简单却极具实用价值的 API。它让你能用标准的 CSS 语法，快速判断一个元素是否符合特定规则，广泛应用于表单验证、事件处理、样式控制等场景。

相比手动检查类名、属性或标签名，matches() 更加语义清晰、代码简洁、可读性强。它让 JavaScript 与 CSS 的结合更加自然，也更贴近“声明式”的开发思维。

掌握它，意味着你已经从“写代码”迈向“用规则写代码”的更高层次。无论是初学者还是中级开发者，它都值得你花几分钟学习并融入日常开发中。

别再用 element.className.indexOf('xxx') !== -1 这种低效方式判断类名了，试试 matches('.btn')，你会发现代码瞬间清爽了不少。

无论你是正在构建一个小型工具，还是维护一个大型前端项目，HTML DOM matches() 方法 都会成为你工具箱里不可或缺的一把钥匙。