在 JavaScript 中一次添加多个类列表

在前端开发中，我们经常需要使用 JavaScript 动态地操作 DOM 元素的 class 属性。为了方便地添加多个类列表，我们可以采用以下两种方法。

1. 使用字符串拼接

我们可以使用 JavaScript 中的字符串拼接来将多个类名组合成一个字符串，然后再将这个字符串赋值给元素的 class 属性。例如，我们要给一个元素添加三个类名 class1、class2 和 class3，可以这样写：

var element = document.querySelector('.example');
element.className = 'class1 class2 class3';

这种方法虽然简单，但是如果需要添加的类名很多，会增加代码的可读性和维护成本。

2. 使用数组和 join 方法

更好的做法是使用一个数组来存储多个类名，然后使用数组的 join() 方法将它们组合成一个字符串，最后再将这个字符串赋值给元素的 class 属性。例如，我们要给一个元素添加四个类名 class1、class2、class3 和 class4，可以这样写：

var element = document.querySelector('.example');
var classNames = ['class1', 'class2', 'class3', 'class4'];
element.className = classNames.join(' ');

这种方法更加语义化和易于维护，可以在数组中添加、删除或修改类名，而不需要修改字符串拼接的代码。

总结：使用数组和 join() 方法是更好的一种方式来一次性添加多个类列表。