JavaScriptのclassListでクラスの追加・削除・判定方法!
JavaScriptのclassListでは該当要素のクラス名の取得・追加・更新・削除を行うことが出来ます。classListの使い方についてサンプルコード付きで解説します。
classListとは?
ブラウザ上で実行したJavaScriptで得られるclassList(Element.classList)は該当要素のclass属性の情報が格納された読み取り専用のプロパティです。
このclassListを使うことで、要素のclass
属性の情報を取得したり、任意のクラス名を追加・削除する事が出来ます。
今回はclassListの使い方についてサンプルコード付きで解説します。
JavaScriptのclassListの使い方
要素のclass属性の値を取得する
ではまずclassListを使ったclass
属性の値の取得方法からです。下記のサンプルコードを見てみましょう。
上記のサンプルコードでは要素をdocument.getElementById
で取得し、classListを取得して表側に表示させています。
結果各要素に設定されているclass
属性の値が表示されています。
配列として渡ってきているので、class
属性の1つ1つを取得して利用しやすいですし、まとめて利用したい場合はそのvalue
を参照すればいいのでとても扱いやすくまとまっています。
class属性の値を追加する
続いてclassListでclass
属性の値を追加する方法です。下記のサンプルコードを見てみましょう。
こちらのサンプルコードでは取得できたclassListに対して
クラスを追加しているコード
// クラスを追加
classes.add('big');
の部分で、big
というクラスを追加しています。このようにclassListに対してadd()
でクラスを追加することが出来ます。
また複数のクラスを一気に追加したい場合は下記のように、add()
に追加したいクラス分だけ引数を追加しましょう。
class属性の値を削除する
classListでクラスを削除するにはremove()
を使います。下記のサンプルコードを見てみましょう。
classListに対してのremove('big')
により、big
クラスが該当要素から削除されています。また複数のクラスを一気に削除したい場合は下記のように削除したい対象分だけ引数を追加しましょう。
クラス名が含まれているか確認する
classListのcontains()
によって指定したクラス名が該当要素ですでに設定されているかどうかを確認することが出来ます。下記のサンプルコードを見てみましょう。
上記のサンプルコードではclassListのcontains()
を使い、引数で指定したクラス名が該当要素に含まれているかどうかを確認しています。引数は複数指定することができ、一方でも含まれていればtrueが返ります。
指定したクラス名をtoggleする
指定したクラス名があれば削除、無ければ追加したい場合(つまりtoggle)は下記のようにtoggle()
を利用しましょう。
上記のサンプルコードではclassListのtoggle()
により引数で指定したクラス名がclass属性にすでにあれば削除、無ければ追加というtoggleの処理を実現しています。
まとめ
これまで見てきたように、JavaScriptのclassListでは要素のクラスの操作(取得、追加、削除、toggle
による更新、contains
による含まれているかの確認)で便利なメソッドが揃っています。
それこそjQueryを読み込まなくても今回解説してきた操作は行えます。ぜひclasListを活用してみて下さい。
ちなみに上記のサンプルコードでは
console.log
でclassListの値を出力していますが、このようにDOMTokenListとして配列の中にclass
属性の値が格納されて渡ってきています