JavaScript

この記事では、HTML要素へCSSクラスを重複なく追加するJavaScriptのclassList.add()メソッドを説明します。

JavaScript’s classList.add() method is used to add class names to a specified element without duplication, making it easy to implement visual or behavioral changes through CSS and DOM manipulations.

classList.add()

classList.add() は、要素の class 属性にクラス名を追加するメソッドです。

• Table Of Contents

基本的な使い方

<!-- 例: <div> 要素を取得し、そのクラスに"active"を追加 -->
<div id="myElement"></div>

<script>
	const element = document.getElementById('myElement');
	element.classList.add('active');
</script>

• 上記の例では、要素の class 属性に "active" が追加されます。
• 既に "active" が付与されている場合は、重複して追加されることはありません。

複数クラスの追加

element.classList.add('visible', 'highlight');

• このように引数をカンマで区切ることで、複数のクラスをまとめて追加できます。
• いずれかのクラスが既に存在していても、新しく追加するクラスだけが付与されるため、重複クラスは発生しません。

classList.add() と className の違い

className プロパティとの比較

className

要素の class 属性の文字列全体を直接読み書きする。

• 例：element.className = 'foo bar' のように文字列を上書き。
• classList と比べると、クラス名の追加・削除や重複チェックを文字列操作で自分で管理する必要がある。

classList.add()

個々のクラスを追加する。

• すでに存在するクラスは再追加されず、管理が自動化される。

メリット

• classList はクラスを配列のように扱えるインターフェースのため、追加や削除を安全に行えます。

よくあるユースケース

表示・非表示の切り替え

• 例：element.classList.add('hidden');
  　→ CSS 側で .hidden { display: none; } のように制御
• 取り除くときは element.classList.remove('hidden') を使います。

アクティブ状態の付与

• ボタンやタブのアクティブ状態を示すクラス名を追加することで、スタイルを変更できる。

複数条件でのクラス操作

• classList は toggle() や contains() などのメソッドも用意されており、状況に応じて効率よく操作できる。

エラーや注意点

• 引数に空文字や空白を含むクラス名など、無効なトークンを渡すとエラー（DOMException）が発生します。
• クラス名は複数あってもスペース区切りではなく、カンマ区切りで個別に指定する必要があります。
  classList.add('foo bar') のように空白を含む文字列を1つの引数で渡すと、foo と bar の2クラスとして追加されるのではなく、エラーになります。複数クラスを追加したいときは classList.add('foo', 'bar') のように、引数を分けて指定します。