classList.contains()

クラスリスト・コンテインズ（DOM操作）

意味クラス存在確認

classList.contains()とは？

指定したクラス値が要素に存在するかどうかを返します。

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

クラスの存在を確認する例

<button onclick='toggleActiveClass()'>activeクラスを切り替え</button>
<button onclick='checkActiveClass()'>activeクラスを確認</button>
<div id='myElement' class='my-element'>この要素のクラスを操作します</div>

<script>
function toggleActiveClass() {
  const element = document.getElementById('myElement');
  element.classList.toggle('active');
  updateElementStatus();
}

function checkActiveClass() {
  const element = document.getElementById('myElement');
  const hasActive = element.classList.contains('active');
  alert('要素は active クラスを持っていますか？ ' + hasActive);
}

function updateElementStatus() {
  const element = document.getElementById('myElement');
  if (element.classList.contains('active')) {
    element.textContent = '現在、activeクラスがあります';
    element.style.backgroundColor = 'lightgreen';
  } else {
    element.textContent = '現在、activeクラスはありません';
    element.style.backgroundColor = 'lightgray';
  }
}

updateElementStatus();
</script>

2つのボタンを使用して、'myElement'の'active'クラスを切り替えたり確認したりします。classList.contains()を使用して要素の状態を視覚的に表示し、アラートで確認することができます。

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

Q. 大文字小文字は区別される？

A. はい、classList.contains()は大文字小文字を区別します。'active'と'Active'は異なるクラスとして扱われます。

Q. 複数のクラスを同時にチェックできる？

A. いいえ、classList.contains()は一度に1つのクラスのみチェックします。複数のクラスをチェックするには、メソッドを複数回呼び出すか、別の方法を使用する必要があります。

Q. 存在しない要素でも使用できる？

A. いいえ、存在しない要素に対してclassList.contains()を呼び出すとエラーが発生します。常に要素の存在を確認してから使用してください。

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

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

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