classListを使用して1つの命令で複数のクラスを追加/削除する方法はありますか？

これまでのところ私はこれをしなければなりません：

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

これはjQueryで実行可能ですが、このように

$(elem).addClass("first second third");

追加または削除するネイティブの方法があるかどうか知りたいのですが。

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

等しい

elem.classList.add("first","second","third");

新しいスプレッド演算子により、複数のCSSクラスを配列として適用することがさらに簡単になります。

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

このclassListプロパティは、重複するクラスが要素に不必要に追加されないようにします。この機能を維持するために、ロングハンドバージョンやjQueryバージョンが気に入らない場合は、addMany関数と（タイプ）removeManyを追加することをお勧めします。DOMTokenListclassList

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) {...}

からのadd()メソッドclassListでは、単一の配列ではなく個別の引数を渡すことができるため、apply add()を使用して呼び出す必要があります。最初の引数にはclassList、同じDOMノードからの参照を渡し、2番目の引数として、追加するクラスの配列を渡す必要があります。

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

要素にクラスを追加するには

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

更新：

クラスを削除する

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

DOMTokenList仕様の新しいバージョンでは、add()およびへの複数の引数とremove()、toggle()状態を強制ための。

執筆時点では、Chromeはadd()およびへの複数の引数をサポートしていますremove()が、他のブラウザはサポートしていません。IE 10以下、Firefox 23以下、Chrome 23以下、およびその他のブラウザーは、2番目の引数をサポートしていません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が期待されていますが、このポリフィルをいくつかの特定のターゲット環境で使用しているので、うまく機能しますが、IE 8以下などのレガシーブラウザー環境で実行されるスクリプトを微調整する必要があるかもしれません。

あなたは以下のようにすることができます

追加

elem.classList.add("first", "second", "third");

削除する

elem.classList.remove("first", "second", "third");

参照

TLDR;

上記の単純なケースでは、削除が機能するはずです。ただし、削除する場合は、削除する前にクラスが存在することを確認する必要があります

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

これは、IE 10および11のユーザーにとって非常に簡単に思える回避策です。

var elem = document.getElementById('elem');

['first','second','third'].map(item => elem.classList.add(item));

<div id="elem">Hello World!</div>

または

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.map(function(item) {
    return 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を参照してください

非常にシンプルで派手ではありませんが、私が信じなければならない実用的な解決策は、非常にクロスブラウザーです。

この関数を作成する

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

次のように呼び出します：removeAddClasses（node.classList、arrayToRemove、arrayToAdd）;

...ここでarrayToRemoveは、削除するクラス名の配列です：['myClass1'、 'myClass2'] etcetera

...およびarrayToAddは、追加するクラス名の配列です：['myClass3'、 'myClass4'] etcetera

追加するクラスの配列があるとすると、ES6スプレッド構文を使用できます。

let classes = ['first', 'second', 'third']; elem.classList.add(...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で失敗する正確な原因は何ですか？

別のポリフィルelement.classListがここにあります。MDNで見つけました。

そのスクリプトを含め、element.classList.add("first","second","third")意図したとおりに使用します。