classList.add() 安全高效地为元素添加一个或多个CSS类，自动去重且不覆盖已有类；支持单个或多个类名参数，需确保元素存在、类名合法且大小写敏感。
直接调用 classList.add() 就能为元素添加一个或多个 CSS 类，它不会覆盖已有类，也不会重复添加已存在的类，是安全、高效的样式控制方式。
基础用法：添加单个或多个类
add() 接收一个或多个字符串参数，每个代表一个要添加的类名：
-
element.classList.add('active')— 添加active类 -
element.classList.add('btn', 'btn-primary', 'is-loading')— 一次性添加多个类，顺序无关
避免重复添加：自动去重
如果目标元素已经拥有某个类，add() 不会报错，也不会重复写入 —— 浏览器内部自动判断并跳过。例如：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
连续执行两次：btn.classList.add('active');<br>btn.classList.add('active');
最终 DOM 中仍只出现一次 class="btn active"
立即学习“Java免费学习笔记（深入）”；
配合事件实现动态切换（如点击切换状态）
常与 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'是两个不同类
