【JavaScript】classListを使って複数のクラスを一括で追加・削除する方法

HTMLやJavaScriptで要素を操作していると、「1回の処理で複数のクラスをまとめて追加・削除したい」という場面によく出会います。この記事では、classListプロパティの基本仕様を踏まえつつ、複数クラスを一括操作するための実用的なテクニックを解説します。

classListプロパティとは？

classListプロパティは、要素に設定されているクラス名（群）をDOMTokenListオブジェクトとして返します。このプロパティ自体は読み取り専用ですが、add()メソッドやremove()メソッドを使うことで、実際にクラスの追加や削除を行うことができます。

classListの大きな利点は、同じクラスが重複して不要に追加されるのを自動的に防いでくれる点です。この便利な挙動を損なわずに済むよう、ロングハンド（個別の記述）やjQueryに頼りたくない場合は、addMany関数とremoveMany関数をDOMTokenListに追加して拡張するのがおすすめです。

addMany／removeManyの実装方法

まずは、スペース区切りのクラス名を受け取って順番に追加するaddManyを実装します。

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

同様に、クラスをまとめて削除するremoveManyも次のように定義できます。

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

実際の使い方

これらのメソッドは、以下のようにスペース区切りでクラス名を渡すだけで利用できます。

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

// 複数のクラスを一括追加
elem.classList.addMany('active visible highlight');

// 複数のクラスを一括削除
elem.classList.removeMany('visible highlight');

補足：モダンブラウザなら可変長引数が使える

近年のブラウザでは、仕様の更新によりadd()やremove()に直接複数の引数を渡せるようになっています。

elem.classList.add('active', 'visible', 'highlight');
elem.classList.remove('visible', 'highlight');

対象とする環境が最新ブラウザのみであれば、こちらの書き方が最もシンプルです。一方、古いブラウザへの対応が必要な場合や、文字列としてまとまったクラス名リストを扱いたい場合には、本記事で紹介したaddMany／removeManyの拡張が有効な選択肢となります。プロジェクトの要件に合わせて使い分けてください。