首页
/ 正文

HTML DOM matches() 方法（千字长文）

更新时间: 2025-04-15 18:06:35

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言

在前端开发中，操作和查询 DOM 元素是开发者最常面对的场景之一。随着技术的发展，浏览器提供了许多便捷的 API 来简化这一过程。其中，HTML DOM matches() 方法 是一个被低估但极其实用的工具。它允许开发者直接判断某个元素是否匹配指定的 CSS 选择器，从而高效地实现元素筛选、状态判断等功能。无论是处理用户交互、动态样式更新，还是构建复杂的组件逻辑，这个方法都能显著提升代码的可读性和执行效率。

本文将从零开始，逐步解析 matches() 方法的核心概念、使用场景、与类似方法的对比，以及实际开发中的最佳实践。通过循序渐进的讲解和代码示例，帮助读者快速掌握这一工具，并理解它在现代 Web 开发中的重要性。

一、什么是 HTML DOM matches() 方法？

1.1 基本概念

matches() 是 DOM 元素的一个原生方法，用于判断当前元素是否匹配指定的 CSS 选择器。其返回值是一个布尔值：

true：表示元素符合选择器规则；
false：表示元素不符合规则。

例如，若有一个 <div class="container"> 元素，调用 element.matches('.container') 将返回 true。

1.2 形象比喻：元素的“身份验证”

可以将 matches() 想象为一个“身份验证系统”：

元素是需要验证的个体；
CSS 选择器是验证的规则；
matches() 是执行验证的“门卫”，根据规则判断元素是否通过验证。

这种比喻能帮助开发者快速理解其核心逻辑：“这个元素是否符合我定义的条件？”

二、为什么需要 matches() 方法？

2.1 替代传统查询方式

在 matches() 出现之前，开发者通常需要通过以下步骤判断元素是否符合选择器：

使用 querySelectorAll() 获取所有匹配的元素；
遍历结果数组，检查目标元素是否存在于其中。

这种方法不仅代码冗长，且性能较差，尤其在处理大量元素时。而 matches() 直接通过单一方法完成判断，简化了流程并提升了效率。

2.2 解决动态场景的痛点

在动态交互场景中，例如：

用户点击某个元素后，需要判断它是否属于特定类；
根据元素的层级关系，执行不同的逻辑。

matches() 可以直接在事件处理函数中调用，例如：

document.addEventListener('click', (event) => {  
  if (event.target.matches('.button.primary')) {  
    // 执行核心逻辑  
  }  
});

这比手动遍历或依赖第三方库更简洁直观。

三、matches() 方法的语法与基本用法

3.1 标准语法

element.matches(selectors);

element：需要验证的 DOM 元素；
selectors：CSS 选择器字符串，支持复杂的组合（如 .class > div#id）。

3.2 基础示例：判断元素类名

<div id="box" class="highlight">内容</div>

const box = document.getElementById('box');  
console.log(box.matches('.highlight')); // true  
console.log(box.matches('.active'));    // false

3.3 复杂选择器的匹配

matches() 支持完整的 CSS 选择器语法，包括：

子元素选择器（>）；
属性选择器（[attr=value]）；
伪类（如 :hover）。

例如，验证元素是否是某个类的直接子元素：

const child = document.querySelector('.parent > .child');  
console.log(child.matches('.parent > .child')); // true

四、与类似方法的对比：matches() vs querySelector

4.1 核心区别

方法	用途	返回值类型
`element.matches()`	判断元素是否匹配选择器	布尔值（true/false）
`document.querySelector()`	根据选择器返回第一个匹配的元素（或 null）	Element 或 null

4.2 场景选择指南

使用 matches() 的场景：
- 需要快速验证单个元素是否符合规则；
- 在事件处理中判断目标元素属性；
- 避免遍历数组的性能开销。
使用 querySelector 的场景：
- 需要获取一组元素中的第一个匹配项；
- 需要操作元素的属性或子节点。

4.3 对比示例：表单验证

假设有一个表单，需要判断输入框是否满足特定类名：

// 使用 matches()  
const input = document.getElementById('username');  
if (input.matches('.required')) {  
  // 执行必填字段验证逻辑  
}  

// 使用 querySelector（非推荐）  
const requiredInputs = document.querySelectorAll('.required');  
if (Array.from(requiredInputs).includes(input)) {  
  // 同样逻辑，但代码更冗长  
}

五、实际案例与进阶技巧

5.1 案例 1：动态样式切换

在响应式设计中，可能需要根据窗口尺寸动态调整元素样式：

function updateStyle(element) {  
  if (window.innerWidth > 768 && element.matches('.sidebar')) {  
    element.style.display = 'block';  
  } else {  
    element.style.display = 'none';  
  }  
}

5.2 案例 2：事件委托优化

在事件委托中，matches() 可以简化目标元素的判断：

document.body.addEventListener('click', (event) => {  
  if (event.target.matches('button.delete')) {  
    // 删除逻辑  
  } else if (event.target.matches('input[type="checkbox"]')) {  
    // 勾选逻辑  
  }  
});

5.3 技巧：结合 CSS 伪类

虽然直接匹配伪类（如 :hover）在部分浏览器中可能不被支持，但可以间接实现：

// 检查元素是否处于悬停状态  
function isHovered(element) {  
  return element.matches(':hover');  
}

六、浏览器兼容性与 polyfill

6.1 兼容性现状

matches() 方法在现代浏览器中已广泛支持，包括：

Chrome 49+
Firefox 64+
Edge 12+
Safari 10.1+

对于旧版浏览器（如 IE），可以通过以下 polyfill 实现基础功能：

if (!Element.prototype.matches) {  
  Element.prototype.matches =  
    Element.prototype.matchesSelector ||  
    Element.prototype.mozMatchesSelector ||  
    Element.prototype.msMatchesSelector ||  
    Element.prototype.oMatchesSelector ||  
    Element.prototype.webkitMatchesSelector ||  
    function(s) {  
      const matches = (this.document || this.ownerDocument).querySelectorAll(s);  
      let i = matches.length;  
      while (--i >= 0 && matches.item(i) !== this) {}  
      return i > -1;  
    };  
}

七、总结与最佳实践

7.1 核心价值

HTML DOM matches() 方法 通过简洁的语法和高效的表现，解决了 DOM 元素匹配的常见痛点。它在以下场景中尤为关键：

事件处理：快速判断目标元素属性；
条件渲染：动态逻辑分支的决策依据；
代码简化：减少对复杂查询或遍历的依赖。

7.2 最佳实践建议

优先使用原生方法：避免引入第三方库实现类似功能；
结合 CSS 选择器语法：充分利用选择器的灵活性；
注意伪类支持：在关键场景中测试伪类匹配的兼容性；
性能优化：在循环或高频触发的场景中，优先缓存选择器结果。

7.3 未来展望

随着 Web API 的持续演进，matches() 方法可能进一步扩展其功能（例如支持更多伪类）。开发者应保持对浏览器新特性的关注，并在项目中合理应用这些工具，以提升开发效率和代码质量。

通过本文的讲解，希望读者能全面理解 HTML DOM matches() 方法 的原理、用法及优势。在实际开发中，它将成为你操作 DOM 元素时不可或缺的“瑞士军刀”——灵活、高效且易于维护。