JavaScript

レシピ

HTML・DOM

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

HTML要素が特定のクラス名を持つか確認する方法について解説します。

この記事のポイント

  • containsメソッドは指定したクラス名が設定されているか確認する
  • クラス名は1つずつ確認する

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」があるか確認します。

コード例

// p要素を取得
var 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が戻り値になります。

コード例

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

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

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

コード例

// p要素を取得
var 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>

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。