HTML DOM classList 属性（超详细）

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

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

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，动态控制元素的样式是一个核心需求。无论是实现交互效果、响应用户操作，还是构建复杂的用户界面，开发者都需要一种高效的方式操作元素的 CSS 类名。此时，HTML DOM classList 属性便成为不可或缺的工具。它提供了一套直观且功能强大的方法，帮助开发者在 JavaScript 中灵活地添加、删除、切换或检查元素的类名。

本文将从基础概念出发，结合实际案例和代码示例，深入讲解 classList 的核心方法、应用场景及常见问题。无论你是编程初学者还是中级开发者，都能通过本文掌握这一工具的使用技巧，并理解其背后的设计逻辑。

什么是 classList 属性？

基础概念

classList 是 HTML 元素的一个内置属性，它返回一个 DOMTokenList 对象，该对象包含了当前元素所有 CSS 类名。通过 classList，开发者无需手动操作 className 属性（如字符串拼接），即可直接对类名进行增删改查。

类比解释：
可以将 classList 想象为一个“衣柜”——元素的类名就像衣柜里的衣服，而 classList 则提供了“添加衣服”“取出衣服”“检查是否有某件衣服”等功能。开发者通过这些功能，可以动态调整元素的外观或行为。

classList 的核心方法

classList 提供了多个常用方法，每个方法都对应一个操作类名的动作。以下通过表格总结这些方法，并结合代码示例说明其用法：

示例代码

// 获取元素
const element = document.getElementById("myElement");

// 添加类名
element.classList.add("highlight", "active");

// 移除类名
element.classList.remove("highlight");

// 切换类名（假设当前没有 "active" 类）
element.classList.toggle("active"); // 添加后返回 true

// 检查是否存在 "selected" 类
const hasClass = element.classList.contains("selected");

方法详解与实际案例

1. add() 方法：动态添加类名

用法：
element.classList.add(class1, class2, ...)
可以一次添加多个类名，且不会重复添加重复的类。

案例：按钮点击高亮

<button id="myButton">点击我</button>

<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    button.classList.add("highlight");
  });
</script>

<style>
  .highlight {
    background-color: yellow;
  }
</style>

当用户点击按钮时，会动态添加 highlight 类，使其背景变为黄色。

2. remove() 方法：安全移除类名

用法：
element.classList.remove(class1, class2, ...)
即使类名不存在，也不会报错，因此比手动操作 className 更安全。

案例：表单验证反馈

<input type="text" id="username" placeholder="请输入用户名">
<div id="feedback"></div>

<script>
  const input = document.getElementById("username");
  const feedback = document.getElementById("feedback");

  input.addEventListener("blur", () => {
    if (input.value.trim() === "") {
      input.classList.add("error");
      feedback.textContent = "用户名不能为空！";
    } else {
      input.classList.remove("error");
      feedback.textContent = "";
    }
  });
</script>

<style>
  .error {
    border-color: red;
  }
</style>

当用户未输入内容时，输入框会添加 error 类并显示错误提示；输入内容后移除该类。

3. toggle() 方法：智能切换状态

用法：
element.classList.toggle(class, force)

• 如果省略 force 参数，则根据类名是否存在来切换；
• 如果提供 force（布尔值），则强制添加或移除类名。

案例：主题切换开关

<button id="themeSwitch">切换主题</button>
<div id="content"></div>

<script>
  const switchButton = document.getElementById("themeSwitch");
  const content = document.getElementById("content");

  switchButton.addEventListener("click", () => {
    content.classList.toggle("dark-mode");
  });
</script>

<style>
  .dark-mode {
    background-color: #333;
    color: white;
  }
</style>

每次点击按钮时，内容区域的 dark-mode 类会切换，实现亮/暗模式的切换。

4. contains() 方法：条件判断与逻辑控制

用法：
element.classList.contains(class)
返回布尔值，用于判断元素是否包含指定类名，常用于条件分支。

案例：导航栏激活状态

<nav>
  <a href="#" class="nav-link active">首页</a>
  <a href="#" class="nav-link">关于</a>
</nav>

<script>
  document.querySelectorAll(".nav-link").forEach(link => {
    link.addEventListener("click", (e) => {
      e.preventDefault();
      document.querySelectorAll(".nav-link").forEach(item => {
        item.classList.remove("active");
      });
      e.target.classList.add("active");
    });
  });
</script>

<style>
  .active {
    font-weight: bold;
    color: blue;
  }
</style>

当用户点击导航链接时，通过 contains 方法判断当前链接是否已激活，从而动态更新选中状态。

进阶技巧与最佳实践

1. 方法链式调用

由于 classList 的方法返回 classList 对象本身，可以将多个操作链式调用：

element.classList.add("a").remove("b").toggle("c");

但需注意：链式调用仅在所有方法均支持时有效，例如 toggle 返回布尔值则无法继续链式操作。

2. 结合其他 DOM 方法

classList 通常与其他 DOM 操作结合使用，例如通过 querySelector 获取元素：

document.querySelector(".item").classList.add("selected");

此外，可以结合事件监听器、表单验证等场景实现更复杂的功能。

3. 性能优化与注意事项

• 避免重复添加或移除类名：虽然 add 和 remove 方法不会因重复操作报错，但过多的重复操作可能影响性能。
• 检查元素是否存在：在操作 classList 之前，确保元素已正确获取，否则会抛出错误：

  const element = document.getElementById("non-existent");
  if (element) {
    element.classList.add("some-class");
  }
  

• 类名格式：类名中不能包含空格或特殊字符（如 .），否则需用 contains 检查前需确保名称正确。

常见问题与解决方案

Q1：classList 在旧版浏览器中不兼容怎么办？

A：classList 是 HTML5 引入的 API，在 IE9 及更早版本中不支持。如果需要兼容旧浏览器，可以使用 className 属性手动操作：

// 替代 add()
element.className += " " + newClass;

// 替代 remove()
element.className = element.className.replace(new RegExp("\\b" + className + "\\b", "g"), "");

但需注意手动操作的复杂性和潜在风险。

Q2：如何同时操作多个元素的类名？

A：使用 querySelectorAll 获取元素集合，然后遍历处理：

document.querySelectorAll(".item").forEach(item => {
  item.classList.add("highlight");
});

Q3：如何监听类名变化？

A：目前没有原生事件直接监听类名变化，但可以通过 MutationObserver 监听属性变更：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === "class") {
      console.log("类名已更新");
    }
  });
});

observer.observe(element, { attributes: true });

结论

通过掌握 HTML DOM classList 属性，开发者能够更高效地实现动态样式控制、交互反馈和界面状态管理。从基础方法到进阶技巧，classList 的直观语法和强大功能使其成为现代前端开发的标准工具。

无论是为按钮添加点击高亮、实现表单验证反馈，还是构建复杂的主题切换系统，classList 都能提供简洁且可靠的支持。建议读者通过实际项目练习这些方法，并结合 CSS 动画或 JavaScript 事件进一步探索其潜力。

希望本文能帮助你深入理解 classList 的工作原理，并在实际开发中灵活运用这一工具，提升代码的可维护性和用户体验！