新版本的DOMTokenList规范允许使用多个参数add()和remove()，以及第二个参数toggle()来强制状态。

在撰写本文时，Chrome支持添加()和删除()的多个参数，但其他浏览器都不支持。IE 10及以下、Firefox 23及以下、Chrome 23及以下及其他浏览器不支持toggle()的第二个参数。

我写了下面的小填充物来帮助我度过难关，直到支持扩展:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

我们期望使用兼容ES5和DOMTokenList的现代浏览器，但我在几个特定的目标环境中使用了这个polyfill，所以它对我来说效果很好，但它可能需要调整脚本，以便在遗留的浏览器环境(如IE 8或更低版本)中运行。

另一个元素填充。classList在这里。我是通过MDN找到的。

我包括该脚本，并使用element.classList.add(“第一”，“第二”，“第三”)，因为它的意图。

新版本的DOMTokenList规范允许使用多个参数add()和remove()，以及第二个参数toggle()来强制状态。

在撰写本文时，Chrome支持添加()和删除()的多个参数，但其他浏览器都不支持。IE 10及以下、Firefox 23及以下、Chrome 23及以下及其他浏览器不支持toggle()的第二个参数。

我写了下面的小填充物来帮助我度过难关，直到支持扩展:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

我们期望使用兼容ES5和DOMTokenList的现代浏览器，但我在几个特定的目标环境中使用了这个polyfill，所以它对我来说效果很好，但它可能需要调整脚本，以便在遗留的浏览器环境(如IE 8或更低版本)中运行。

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

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

在字符串中添加由空格分隔的多个类的更好方法是使用带有split的Spread_syntax:

element.classList.add(...classesStr.split(" "));

新的展开操作符使应用多个CSS类作为数组更加容易:

const list = ['first', 'second', 'third'];
element.classList.add(...list);