classList属性确保重复的类不会不必要地添加到元素中。为了保持这个功能，如果你不喜欢手工版本或jQuery版本，我建议添加一个addMany函数和removmany到DOMTokenList (classList的类型):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

这些可以像这样使用:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

更新

根据你的评论，如果你只希望在这些事件没有定义时为它们编写一个自定义方法，请尝试以下方法:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}

我喜欢@rich。kelly的答案，但我想使用与classList.add()(逗号分隔字符串)相同的命名法，因此稍有偏差。

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

所以你可以使用:

document.body.classList.addMany('class-one','class-two','class-three');

我需要测试所有的浏览器，但这适用于Chrome。 我们是否应该检查一些比DOMTokenList.prototype.addMany的存在更具体的东西?究竟是什么原因导致classList.add()在IE11中失败?

向元素中添加类

document.querySelector(elem).className+=' first second third';

更新:

删除一个类

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

下面是一个针对ie10和ie11用户的工作，看起来非常简单。

var elem = document.getElementById（'elem'）; ['first'，'second'，'three'].forEach（item => elem.classList.add（item））; <div id=“elem”>Hello World！</div>

Or

var elem = document.getElementById（'elem'）， 类 = [“第一”、“第二”、“第三”]; classes.forEach（function（item） { elem.classList.add（item）; }); <div id=“elem”>Hello World！</div>

标准定义只允许添加或删除单个类。有几个小的包装器函数可以完成您的要求:

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

这些包装器允许您将类列表指定为单独的参数、用空格或逗号分隔的字符串或组合。有关示例，请参见http://jsfiddle.net/jstoolsmith/eCqy7

由于classList中的add()方法只允许传递单独的参数而不是单个数组，因此需要使用apply调用add()。对于第一个参数，你需要从相同的DOM节点传递classList引用，作为第二个参数，你想添加的类数组:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);