DOM

【JavaScript】DOM要素に複数のクラスを一括で追加・削除する

更新日：2023/02/14

JavaScriptでDOM要素にクラスを追加したり削除する方法と、複数のクラスを一括で追加・削除する方法を紹介します。

クラスの追加と削除

DOM要素にクラスを追加するときはclassList.add()を、削除するときはclassList.remove()を使用します。

次のようなHTMLコードがあるとして...

<p class="class1 class2">こんにちは</p>

クラスを追加するときは、次のようにclassList.add()を使用する。

const ptags = document.getElementsByTagName("p")[0];
  // class3を追加
ptags.classList.add( "class3" );
console.log( ptags.classList.toString() ); // class1 class2 class3

削除は、次のようにclassList.remove()を使用する。

const ptags = document.getElementsByTagName("p")[0];
  // class2を追加
ptags.classList.remove( "class2" );
console.log( ptags.classList.toString() ); // class1

ちなみに、追加と削除のコードに繋がりはないと想定してください。

それと、classList.toString()はクラス名をスペースで連結した文字列を生成してくれます。
知っておくと、微妙に便利です。

で、複数のクラスを追加するとき、僕は次のように記述していました。

ptags.classList.add( "class3" );
ptags.classList.add( "class4" );
ptags.classList.add( "class5" );

なんて、面倒なんだ。と思ってました。

複数クラスの一括追加と削除

複数のクラスを追加または削除する場合、何度も関数を呼び出す必要はありませんでした。

次のように、引数で複数のクラス名を渡すだけです。
既に追加済みのクラスを含んでいても、大丈夫です。

削除で存在しないクラス名を指定しても、エラーにはなりません。

ptags.classList.add( "class2", "class3" , "class4" ); // クラス追加
console.log( ptags.classList.toString() );  // class1 class2 class3 class4

ptags.classList.remove( "class1", "xxxxx" ); // クラス削除
console.log( ptags.classList.toString() ); // class2 class3 class4

知らないと損する、便利な機能でした。

なお、クラス名を配列で保持している場合、次のように ...（スプレッド構文）を使用すると簡単に渡せます。

const array = ["class2", "class3" , "class4"];
ptags.classList.add( ...array );

classListを配列(Arrayオブジェクト)化する

DOM要素からクラス名を取得して処理を行うとき、classListプロパティのままではArrayオブジェクトのメソッドを使えないので少し使い勝手が悪いです。

そこで、Arrayオブジェクトに変換してから処理する方法を紹介します。
変換はArray.from()を使用します。

const ptags = document.getElementsByTagName("p")[0];
const classListArray = Array.from( ptags.classList );

以前、Array.from()なんて使えないと書いた記憶がありますが、今は頻繁に使ってます。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。