JavaScript: classList、className、正規表現を使った要素のクラス判定
2024-04-02
ここでは、JavaScriptで要素にクラスが含まれているかどうかを確認する3つの方法を紹介します。
classList プロパティを使用する
最もシンプルで効率的な方法は、classList プロパティを使用する方法です。classList プロパティは、要素のクラス名のリストを表すオブジェクトです。
<div id="my-element" class="active important">
...
</div>
以下のコードは、my-element 要素に active クラスが含まれているかどうかを確認します。
const element = document.getElementById('my-element');
if (element.classList.contains('active')) {
// `active` クラスが含まれている場合の処理
} else {
// `active` クラスが含まれていない場合の処理
}
classList.contains() メソッドは、引数で指定したクラス名が存在するかどうかをtrue/falseで返します。
className プロパティは、要素のクラス名の文字列を取得または設定するために使用できます。
const element = document.getElementById('my-element');
if (element.className.includes('active')) {
// `active` クラスが含まれている場合の処理
} else {
// `active` クラスが含まれていない場合の処理
}
className プロパティはスペース区切りの文字列なので、includes() メソッドを使用して、引数で指定したクラス名が存在するかどうかを調べることができます。
正規表現を使用する
より複雑な条件でクラスの存在をチェックしたい場合は、正規表現を使用することができます。
const element = document.getElementById('my-element');
const regex = /\bactive\b/;
if (regex.test(element.className)) {
// `active` クラスが含まれている場合の処理
} else {
// `active` クラスが含まれていない場合の処理
}
\b は単語境界を表す正規表現です。このコードは、active クラス名が単語境界に囲まれているかどうかを調べます。
以上、JavaScriptで要素にクラスが含まれているかどうかを確認する3つの方法を紹介しました。それぞれの方法にはメリットとデメリットがあるので、状況に合わせて適切な方法を選択してください。
classList プロパティを使用する
<div id="my-element" class="active important">
...
</div>
const element = document.getElementById('my-element');
// `active` クラスが含まれているかどうかを確認
if (element.classList.contains('active')) {
console.log('要素は `active` クラスを持っています');
} else {
console.log('要素は `active` クラスを持っていません');
}
// `important` クラスが含まれているかどうかを確認
if (element.classList.contains('important')) {
console.log('要素は `important` クラスを持っています');
} else {
console.log('要素は `important` クラスを持っていません');
}
className プロパティを使用する
<div id="my-element" class="active important">
...
</div>
const element = document.getElementById('my-element');
// `active` クラスが含まれているかどうかを確認
if (element.className.includes('active')) {
console.log('要素は `active` クラスを持っています');
} else {
console.log('要素は `active` クラスを持っていません');
}
// `important` クラスが含まれているかどうかを確認
if (element.className.includes('important')) {
console.log('要素は `important` クラスを持っています');
} else {
console.log('要素は `important` クラスを持っていません');
}
正規表現を使用する
<div id="my-element" class="active important">
...
</div>
const element = document.getElementById('my-element');
// `active` クラスが含まれているかどうかを確認
const regex = /\bactive\b/;
if (regex.test(element.className)) {
console.log('要素は `active` クラスを持っています');
} else {
console.log('要素は `active` クラスを持っていません');
}
// `important` クラスが含まれているかどうかを確認
const regex2 = /\bimportant\b/;
if (regex2.test(element.className)) {
console.log('要素は `important` クラスを持っています');
} else {
console.log('要素は `important` クラスを持っていません');
}
hasAttribute() メソッドは、要素が特定の属性を持っているかどうかを確認するために使用できます。
const element = document.getElementById('my-element');
// `active` クラスを持っているかどうかを確認
if (element.hasAttribute('class')) {
console.log('要素は `class` 属性を持っています');
} else {
console.log('要素は `class` 属性を持っていません');
}
const element = document.getElementById('my-element');
// `class` 属性の値を取得
const className = element.getAttribute('class');
// `active` クラスが含まれているかどうかを確認
if (className.includes('active')) {
console.log('要素は `active` クラスを持っています');
} else {
console.log('要素は `active` クラスを持っていません');
}
jQueryを使用している場合は、hasClass() メソッドを使用して、要素にクラスが含まれているかどうかを確認できます。
const element = $('#my-element');
// `active` クラスを持っているかどうかを確認
if (element.hasClass('active')) {
console.log('要素は `active` クラスを持っています');
} else {
console.log('要素は `active` クラスを持っていません');
}
これらの方法は、上記で紹介した3つの方法よりも汎用性が高いですが、パフォーマンスが劣る場合もあります。
javascript html css
