JavaScript

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() [method]

　classList.add() は、指定した要素（HTML 要素）の class属性に、新たなクラス名を追加するためのメソッドです。

基本的な使い方

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

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

• 上記の例では、要素のクラス属性に "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; } のように制御
• 取り除くときは classList.remove('hidden') を使う。

アクティブ状態の付与

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

複数条件でのクラス操作

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

エラーや注意点

• 引数に 空文字 や 無効なクラス名（スペースのみなど）を渡すとエラーになる場合があります。
• クラス名は複数あってもスペース区切りではなく、カンマ区切りで個別に指定する必要があります。
  たとえば classList.add('foo bar') と書くと、foo bar という“ひとつ”のクラス名になってしまい、望み通りに追加されません。