JavaScriptでは、DOM（Document Object Model）操作を通じて要素にクラスを追加することができます。
クラスの追加はスタイルの変更や簡単なアニメーションや動的な要素の制御に利用されます。
この記事では、JavaScriptで要素にクラスを追加する方法について解説します。
目次
classListオブジェクトとそのメソッド
HTML要素のclassListプロパティは、その要素に関連するすべてのクラス名をリスト形式で提供するオブジェクトです。
このclassListオブジェクトには、クラスの追加、削除、切り替えなどの操作を行うためのメソッドが含まれています。
classList.add()メソッド
classList.add()メソッドは、指定したクラス名を要素に追加します。
クラス名が既に要素に存在する場合は、何も起こりません。
const element = document.getElementById('myElement');
element.classList.add('addition');このコードは、IDがmyElementである要素にクラス名additionを追加します。
他のクラス操作メソッド
classList.remove()メソッド
classList.remove()メソッドは、指定したクラス名を要素から削除します。
追加するときと同じような感じで削除するときはクラス名が存在しない場合、何も起こりません。
element.classList.remove('addition');classList.toggle()メソッド
classList.toggle()メソッドは、指定したクラス名が存在する場合は削除し、存在しない場合は追加します。このメソッドは、特定のクラスの有無に応じてスタイルを切り替える場合に便利です。
element.classList.toggle('addition');classList.contains()メソッド
classList.contains()メソッドは、指定したクラス名が要素に存在するかどうかを確認します。
存在する場合はtrue、存在しない場合はfalseを返します。
if (element.classList.contains('addition')) {
// クラス 'addition' が存在する場合の処理
}jQueryでのクラス操作
JavaScriptと同様に、jQueryでも要素にクラスを追加、削除、切り替えすることができます。jQueryは、DOM操作を簡潔に記述できるため、広く使用されています。
クラスの追加: addClass()
$('#myElement').addClass('addition');jQueryのaddClass()メソッドは、指定したクラス名を要素に追加します。
JavaScriptのclassList.add()と同様の機能です。
クラスの削除: removeClass()
$('#myElement').removeClass('addition');removeClass()メソッドは、指定したクラス名を要素から削除します。
JavaScriptのclassList.remove()と同様の機能です。
クラスの切り替え: toggleClass()
$('#myElement').toggleClass('addition');toggleClass()メソッドは、クラス名が存在する場合は削除し、存在しない場合は追加します。
JavaScriptのclassList.toggle()と同様の機能です。
クラスの確認: hasClass()
if ($('#myElement').hasClass('addition')) {
// クラス 'addition' が存在する場合の処理
}hasClass()メソッドは、指定したクラス名が要素に存在するかどうかを確認します。
JavaScriptのclassList.contains()と同様の機能です。
JavaScriptとjQueryの比較と注意点
JavaScriptとjQueryのクラス操作メソッドは非常に似ていますが、いくつかの違いがあります。例えば、jQueryのメソッドはチェーン可能であり、複数の操作を一度に行うことができます。
$('#myElement').addClass('addition').removeClass('subtraction');一方で、JavaScriptのclassListメソッドはチェーンできないため、それぞれの操作を別々に記述する必要があります。
element.classList.add('addition');
element.classList.remove('subtraction');これらの違いを理解し、適切な場面で使い分けることが重要です。JavaScriptとjQueryの機能が似ているため、混同しないように注意してください。
まとめ
JavaScriptとjQueryを使用した要素へのクラス操作は、ウェブ開発において非常に重要なスキルです。
それぞれの方法の違いを理解し、適切に使用することで、効率的なDOM操作が可能になります。
クラス操作を正確に行うことで、デザインと機能を効果的に制御できます。
