classList.add()

クラスリスト・アド（DOM操作）

意味クラスを追加

classList.add()とは？

指定したクラス値を要素に追加します。既に存在する場合は何もしない。

classList.add()の具体的な使い方

単一のクラスを要素に追加する例

<button onclick='addClassToMyElement()'>classList.addの使用例</button>
<div id='myElement' class='my-element'>私の要素</div>

<script>
function addClassToMyElement() {
  const element = document.getElementById('myElement');
  element.classList.add('new-class');
  alert('クラス追加後: ' + element.className);
}
</script>

ボタンをクリックすると、'myElement'というIDを持つ要素に'new-class'クラスを追加します。追加後の要素のクラス名をアラートで表示します。

複数のクラスを要素に追加する例

<button onclick='addMultipleClasses()'>複数クラスの追加</button>
<div id='multiElement' class='my-element'>複数クラスの例</div>

<script>
function addMultipleClasses() {
  const element = document.getElementById('multiElement');
  element.classList.add('class1', 'class2', 'class3');
  alert('追加されたクラス: ' + element.className);
}
</script>

ボタンをクリックすると、'multiElement'というIDを持つ要素に一度に複数のクラス（'class1', 'class2', 'class3'）を追加します。追加後の要素のクラス名をアラートで表示します。

classList.add()に関するよくある質問

Q. 既存のクラスを追加するとどうなる？

A. 既に存在するクラスをadd()メソッドで追加しようとしても、エラーは発生せず、単に無視されます。クラスの重複は起こりません。

Q. add()の戻り値は何ですか？

A. classList.add()メソッドは何も返しません（undefined）。クラスが追加されたかどうかを確認するには、追加後にclassList.contains()を使用するか、classList自体を確認する必要があります。

Q. スペースを含むクラス名は追加できる？

A. いいえ、classList.add()ではスペースを含むクラス名を直接追加することはできません。スペースを含む文字列は複数のクラスとして解釈されます。スペースを含むクラス名を追加したい場合は、className プロパティを使用する必要があります。

classList.add()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのclassList.add()やremoveChild()、firstChild、Document、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。