JS怎么一次性添加或删除多个class类名

图 0：JavaScript 批量增删 class 核心方法速览

一、原生 classList 的多参数特性

许多刚接触 DOM 操作的开发者习惯了 element.classList.add('active') 这种只传递单个类名的写法，误以为要添加多个类名就必须连续写好几行代码或者写循环。

事实上，现代 W3C DOM 标准中的 DOMTokenList 接口早已将 add() 与 remove() 设计为接收变长参数（Rest Parameters）。这意味着你可以一次性传入任意数量的类名实参：

// 获取目标 DOM 元素
const box = document.getElementById('box');

// 1. 一次性添加多个类名（以逗号分隔）
box.classList.add('card', 'card-highlight', 'is-active');

// 2. 一次性删除多个类名（以逗号分隔）
box.classList.remove('loading', 'hidden', 'skeleton');

这种原生写法的执行效率非常高，底层由浏览器引擎直接将多个 Token 合并解析到元素对应的类名集合中，不仅代码结构精简，还能避免频繁触发多余的样式重算。

二、动态数组场景：配合 ES6 扩展运算符

在实际项目开发中，类名往往来自动态状态判断、组件属性配置或服务器接口返回的数据，通常以字符串数组的形式存在。

如果直接把数组变量传给 classList.add(array)，浏览器会报错或将整个数组强制转换成包含逗号的无效字符串。正确的做法是利用 ES6 的扩展运算符 ...，把数组解构打散成逗号分隔的独立参数：

const box = document.getElementById('box');

// 动态状态数组
const statusClasses = ['theme-dark', 'size-large', 'fade-in'];

// 使用扩展运算符展开数组，一次性批量添加
box.classList.add(...statusClasses);

// 需要批量卸载的类名数组
const oldClasses = ['theme-light', 'size-small', 'fade-out'];

// 一次性批量删除
box.classList.remove(...oldClasses);

图 1：一次性操作多个 class 的完整处理步骤与流转路径

三、核心避坑：为什么不能直接传入空格分隔的字符串？

新手在批量增删类名时，最容易犯的一个典型错误是将包含空格的类名整串传给 classList.add()，例如：

// 错误示范：会导致控制台抛出 DOMException 异常！
box.classList.add('btn primary active');

执行上述代码时，浏览器会立刻抛出如下未捕获异常：

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': 
The token provided ('btn primary active') contains HTML space characters, 
which are not valid in tokens.

产生这一异常的原因在于底层规范：classList 返回的是一个 DOMTokenList 对象，它本质上是一个由“单一合法 Token”构成的离散集合。根据 HTML 标准，单个类名 Token 严禁包含任何 ASCII 空白字符（如空格、换行、制表符）。传入带有空格的单个字符串会直接违反规范判定。

如果手头的原始数据就是一个包含空格的长字符串（例如来自后端接口或 data-* 属性），必须先将其拆分为无空格的独立数组，再展开传入：

const rawClassString = "   btn   primary   active   ";

// 规范做法：先 trim 清理首尾空格，再按任意连续空白正则分割，并过滤空项
const cleanClassList = rawClassString
  .trim()
  .split(/\s+/)
  .filter(Boolean);

// 将清洗后的独立 Token 数组一次性传入
box.classList.add(...cleanClassList);

图 2：classList 传参机制与 DOMException 拦截原理

四、机制对比：classList 与传统 className 字符串操作

在现代标准普及之前，开发者常用 element.className 配合字符串拼接来管理类名。虽然直接给 className 赋值能够覆盖所有类名，但在需要“增量添加”或“精准剔除”多个类名时，纯字符串操作存在诸多隐患。

图 3：classList 集合机制与传统 className 字符串拼接的深度对比

1. 重复添加的幂等性

使用 className += ' active' 时，若未做去重检查且代码多次执行，元素的 class 会不断累加变成 class="card active active active"。而 classList.add() 内部具备集合唯一性校验，即使重复传入已存在的类名，也绝不会产生多余重复项。

2. 删除操作的边界安全

当使用 className.replace('btn', '') 进行字符串替换时，如果元素原本包含 btn-primary 或 sub-btn，简单的子串替换很容易发生误伤，导致类名损坏为 -primary。而 classList.remove('btn') 始终严格以完整 Token 为单位比对，即使删除不存在的类名也会安全静默跳过，绝不影响其他相似名称的类名。

五、常见业务场景与选型速查

掌握了底层机制后，在实际项目中面对不同的业务诉求，可以按如下场景进行快速选型：

图 4：一次性增删多个 class 的场景速查与选型决策

场景 1：重置状态时“删一批、加一批”

在弹窗切换、Tab 切换或表单校验等 UI 状态流转中，往往需要先移除上一状态的多个类名，同时赋予新状态的多个类名。可以直接链式或者连续执行：

function switchTabState(tabElement) {
  // 一次性清除所有非激活与等待状态
  tabElement.classList.remove('is-disabled', 'is-pending', 'is-collapsed');
  
  // 一次性添加当前激活所需的新类名
  tabElement.classList.add('is-active', 'is-expanded', 'theme-highlight');
}

场景 2：彻底清空现有所有类名

如果你需要将某个 DOM 元素的所有 class 完全清空，不需要先遍历再用 classList.remove()。此时直接利用 className 赋空值是最快且最直观的：

// 直接清空元素的所有 class 属性
element.className = '';

// 或者全量覆写为全新的多个类名
element.className = 'new-class-1 new-class-2 new-class-3';