最終更新日:
公開日:
レシピ
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」があるか確認します。
JS コード例
// 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が戻り値になります。
JS コード例
// p要素を取得
let p1_element = document.getElementById("p1");
// クラス名を確認する
console.log(p1_element.classList.contains("text text_type1")); // false
containsメソッドでクラス名を確認し、見つからなければaddメソッドで新しくクラス名を追加するというような使い方ができます。
JS コード例
// 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>
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。