もくじ
Web制作や開発で要素に特定のクラス名が含まれているか判定する場面は多くあります。
例えば、クリック時に特定のスタイルを適用したり、特定の条件を満たす要素のみを処理したりするケースです。
この記事では、JavaScriptで簡単に要素に特定のクラス名が含まれているかどうかを判定する方法を、実際のサンプルコードと共にわかりやすく解説します。モダンな書き方から古いブラウザへの対応方法まで紹介しますので、ぜひ現場で活用してください。
classList.containsメソッドでクラスが含まれているかを判定
JavaScriptでは、DOM要素のclassListプロパティを利用して、クラス名が存在するかどうかを判定することができます。
classList.containsメソッドは、指定したクラス名が要素に含まれていればtrueを、含まれていなければfalseを返します。
const element = document.querySelector('.example'); // 対象の要素を取得if (element.classList.contains('target-class')) { console.log('クラスが含まれています');} else { console.log('クラスが含まれていません');}classList.containsメソッドの特徴と注意点
判定について
classList.containsは完全一致のみをチェックするため、「target-class1」や「target」などの部分一致は判定しません。互換性
classListプロパティはほとんどのモダンブラウザに対応していますが、古いブラウザには対応していない場合があります。
classListプロパティのブラウザ別対応状況
classNameプロパティでクラスが含まれているかを判定
古いブラウザとの互換性が必要な場合、classNameプロパティを使って判定することも可能です。
classNameを使用するとクラス全体を文字列として取得するため、splitメソッドで配列にしてから完全一致を確認する必要があります。
const element = document.querySelector('.example');const classes = element.className.split(' '); // クラスを配列として取得if (classes.indexOf('target-class') !== -1) { console.log('クラスが含まれています');} else { console.log('クラスが含まれていません');} ※ 注意
className でクラス名を判定する場合、split(' ') で配列に分割し「完全一致」で比較することで、target-class1 や mytarget-class など部分一致の誤判定を防げます。
ただし、クラス属性の余計なスペースによって空文字が配列に含まれる場合があるため、trim() や filter(Boolean) などで空要素を除去するとより安全です。
また、正規表現での部分一致判定は意図しない誤検出につながるため、完全一致での検証をおすすめします。
まとめ
JavaScriptで要素に特定のクラス名が含まれているかを判定する方法は、とてもシンプルかつ実用的です。
現代のブラウザではclassList.containsで簡単にチェックでき、古いブラウザの場合はclassNameとsplitの組み合わせで対応できます。
それぞれ「完全一致」での判定が重要で、部分一致による誤判定やスペースによる不具合にも気を付けましょう。
ちょっとしたUI操作や条件分岐など、日々のWeb制作で役立つテクニックなので、ぜひ活用してみてください。