classList

クラスリスト（DOM操作）

意味クラスの追加・削除

classListとは？

classListプロパティは、DOM要素のclass属性を操作するためのものです。`add()`, `remove()`, `toggle()`, `contains()`などのメソッドを使って、クラス名の操作が可能です。

classListの具体的な使い方

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

<button onclick='addClassToElement()'>classListの使用例</button>
<div id='example' class='example'>例</div>

<script>
function addClassToElement() {
  let element = document.getElementById('example');
  element.classList.add('active');
  alert('クラス追加後: ' + element.className);
}
</script>

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

要素のクラスをトグルする例

<button onclick='toggleClassOnElement()'>classListのtoggle使用例</button>
<div id='toggleExample' class='example'>トグル例</div>

<script>
function toggleClassOnElement() {
  let element = document.getElementById('toggleExample');
  element.classList.toggle('highlight');
  alert('トグル後のクラス: ' + element.className);
}
</script>

ボタンをクリックするたびに、'toggleExample'というIDを持つ要素の'highlight'クラスをオン/オフします。トグル後の要素のクラス名をアラートで表示します。

classListに関するよくある質問

Q. classListとclassNameの違いは？

A. classListはDOMTokenListオブジェクトを返し、クラスの追加・削除・トグルなどの操作が容易です。一方、classNameは単純な文字列を返し、スペース区切りのクラス名を直接操作する必要があります。

Q. 複数のクラスを一度に追加できる？

A. はい、classList.add()メソッドに複数の引数を渡すことで、複数のクラスを一度に追加できます。例：element.classList.add('class1', 'class2', 'class3');

Q. IE11でclassListは使えますか？

A. IE11では基本的なclassListの機能はサポートされていますが、一部のメソッド（例：toggle()の2番目の引数）はサポートされていない場合があります。クロスブラウザ互換性が必要な場合は、ポリフィルの使用を検討してください。

classListが学べる書籍の紹介

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

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