もくじ
この記事では、JavaScriptで指定したクラスが含まれているかを判定する方法を解説します。
Web制作や開発で要素に特定のクラス名が含まれているか判定する場面は多くあります。
例えば、クリック時に特定のスタイルを適用したり、特定の条件を満たす要素のみを処理したりするケースです。
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('クラスが含まれていません');}
udemyでJavaScriptを学ぶ
- 本格的なWEBサイトを作成する方法について学びます。
- Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
- CSS、JavaScriptの実践的な記述について深く学びます。
- CSS、JavaScriptアニメーションの実装について学びます。
- 最新の実践的なWEB画面の作成方法について深く学びます。
- CSS、JavaScriptのコードの最適化、安定化について学びます。
- 維持管理、持続可能なコードの記述方法について学びます。
- ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
- 他の先生のフロントエンドの入門編を終えたレベルの方
- 自分で本格的なWEBサイトを作ってみたい方
- CSS、JavaScriptの実践的な基礎を効率的に学びたい方
- CSS、JavaScriptを今後仕事で使う予定の方
- CSS、JavaScriptのコードの整理方法について学びたい方
- CSS、JavaScriptのアニメーションを学びたい方
- CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
- CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
- JavaScriptの動作原理について深く学びます。
- JavaScriptがどのように実行されるのかについて深く学びます。
- ES6+の最新のJavaScriptの記法について幅広く学びます。
- 変数や参照の仕組みについて深く学びます。
- オブジェクトのメカニズムについて深く学びます。
- 関数のメカニズムについて深く学びます。
- スコープの仕組みについて深く学びます。
- プロトタイプのメカニズムについて深く学びます。
- 反復処理のメカニズムについて深く学びます。
- ジェネレーターやイテレーターについて深く学びます。
- コールバック関数について深く学びます。
- 非同期処理のメカニズムについて深く学びます。
- モジュールの仕組みについて深く学びます。
- クロージャーの仕組みについて深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- thisの仕組みについて深く学びます。
- bind、apply、callの動作原理について深く学びます。
- クラスと継承の仕組みについて深く学びます。
- ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
- Map，Setなどの強力なコレクションについて実践を交えて学びます。
- よく使用される強力な実装パターンを演習を交えて学びます。
- 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
- JavaScriptをコアの動作原理からキチンと理解したい方。
- 自分の思った通りコードが動かずに悩んでいる方。
- 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
- React, Vue, Angularが使いこなせず悩んでいる方。
- JavaScriptの不可解な動きが理解できず、苦しんでいる方。
- 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
- JavaScriptを本気で勉強したいと思っている方。
- JavaScriptの変態仕様に苦しんでいる方。
- JavaScriptが苦手なプログラマーの方。
もみじ
JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。
初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。
講座内容は実践で使用するものが多く、実務でも役立つ内容でした。