classList.add() 安全高效地为元素添加一个或多个CSS类，自动去重且不覆盖已有类；支持单个或多个类名参数，需确保元素存在、类名合法且大小写敏感。

直接调用 classList.add() 就能为元素添加一个或多个 CSS 类，它不会覆盖已有类，也不会重复添加已存在的类，是安全、高效的样式控制方式。

基础用法：添加单个或多个类

add() 接收一个或多个字符串参数，每个代表一个要添加的类名：

• element.classList.add('active') — 添加 active 类
• element.classList.add('btn', 'btn-primary', 'is-loading') — 一次性添加多个类，顺序无关

避免重复添加：自动去重

如果目标元素已经拥有某个类，add() 不会报错，也不会重复写入 —— 浏览器内部自动判断并跳过。例如：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

连续执行两次：

btn.classList.add('active');<br>btn.classList.add('active');

最终 DOM 中仍只出现一次 class="btn active"

配合事件实现动态切换（如点击切换状态）

常与 classList.remove() 或 classList.toggle() 搭配使用。比如实现「展开/收起」按钮：

• 点击时添加 expanded 类：panel.classList.add('expanded')
• 若需先清除其他状态类，可提前移除：panel.classList.remove('collapsed')
• 更简洁的切换逻辑建议用 toggle()，但 add() 更适合“只加不删”的场景，比如加载中加 loading，完成后由其他逻辑统一清理

注意点：确保元素和类名有效

• 调用前确认 element 存在且非 null，否则报错 Cannot read property 'classList' of null
• 类名不能含空格、制表符等非法字符；传入空字符串或 undefined 会被忽略，但不推荐依赖这种行为
• 类名区分大小写，'Active' 和 'active' 是两个不同类

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南