HTML要素が特定のクラス名を持つか確認する

HTML要素のクラス名を確認する

HTML要素に特定のクラス名が設定されているかを確認するときは、classListプロパティのcontainsメソッドを使います。
containsメソッドはパラメータに確認したいクラス名を指定することでHTML要素のclass属性を確認し、指定したクラス名があればtrue、なければfalseを返します。

今回は解説用に以下のHTMLコードを使ってクラス名の有無を確認していきます。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <p id="p1" class="text text_type1">テキストテキストテキスト</p>
</article>

以下の例では、HTMLコードからid属性を使ってp要素を取得し、class属性に「text_type1」と「text_type1」があるか確認します。

JavaScript コード例

// p要素を取得
let p1_element = document.getElementById("p1");

// クラス名を確認する
console.log(p1_element.classList.contains("text_type1")); // true
console.log(p1_element.classList.contains("text_type2")); // false

containsメソッドはクラス名を必ず1つずつ指定する必要があります。
そのため、例えば以下のようにクラス名を「text text_type1」とまとめて確認しようとしてもfalseが戻り値になります。

JavaScript コード例

// p要素を取得
let p1_element = document.getElementById("p1");

// クラス名を確認する
console.log(p1_element.classList.contains("text text_type1"));  // false

containsメソッドでクラス名を確認し、見つからなければaddメソッドで新しくクラス名を追加するというような使い方ができます。

JavaScript コード例

// p要素を取得
let p1_element = document.getElementById("p1");

if( !p1_element.classList.contains("text_type2") ) {
  p1_element.classList.add("text_type2");
}

このコードを実行すると、p要素のclass属性は次のようになります。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <p id="p1" class="text text_type1 text_type2">テキストテキストテキスト</p>
</article>