【JavaScript】classListとは?使用できるプロパティやメソッドを紹介!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年09月16日に投稿されました。)

JavaScriptではクラスの操作を簡単に行うことができるclassListというものがあります。

classListとは、クラスに関する操作を行うためのプロパティになります。

クラスに関する操作を行うことから、クラスの追加や削除、置き換えなどを簡単に実施することができます。

また、ブラウザによってはclassListがサポートがされていませんが、ライブラリを使用することで使用が可能になります。

要素に付与されているクラスの操作はJavaScript上ではよく行うため、もしJavaScriptで要素へのクラス操作を行いたい場合はclassListを使用するようにしましょう。

今回はJavaScriptのclassListで使用できるプロパティやメソッドの一覧についてご紹介します。

この記事はこんな方におすすめ
・要素へのクラスの操作を簡単に行いたい場合
・要素に付与されているクラスの情報を取得したい場合

classListとは

classListとはJavaScriptで要素のクラス属性にアクセスし、クラスに関する操作を行うためのプロパティとなります。

そのため、要素のスタイルを変更したり、要素の制御を動的に変更することができたりします。

classListの書き方

classListの書き方は下記のようになります。

要素の後ろにclassListと追記し、その後にメソッド名やプロパティ名をさらに追記することで使用することができます。

classListの返り値

classListの返り値はDOM要素リストのオブジェクトなります。

classListを使用するメリット

ここではclassListを使用するメリットについてご紹介します。

クラスの操作が容易である

1つ目はクラスの操作が容易であるということです。

classListには要素に対してクラスを追加したり削除したりするための便利なメソッドが準備されています。

そのため、JavaScriptを使用した要素のスタイルを動的に変更する操作が簡単になります。

ソースコードの可読性が高くなる

2つ目はソースコードの可読性が高くなるということです。

classListを使用することで、クラス名を直接操作せず、クラスの追加や削除を簡単な方法で行うことができます。

これにより、コードがより読みやすく、メンテナンスしやすくなります。

ブラウザの互換性がある

3つ目はブラウザの互換性があるということです。

classListは、ほとんどのブラウザでサポートされています。

そのため、ブラウザの互換性を気にすることなく要素のクラスを操作できます。

また、古いブラウザでサポートされていない場合は、動作させるためのライブラリも準備されています。

セキュリティが高い

4つ目はセキュリティが高いということです。

classListを使用することで、クラスを直接操作する必要がなくなります。

そのため、不正なコードの挿入を防ぐことができます。

再利用性が高い

5つ目は再利用性が高いということです。

classListを使用すると、他の要素にも同じようなコードで利用することができます。

そのため、コードの効率性が向上し、メンテナンスが楽になります。

classListで使用できるプロパティの一覧

classListのプロパティを使用することで、指定した要素に付与されているクラスの詳細情報を取得することができます。

そのため、ここではclassListで使用できるプロパティの一覧についてご紹介します。

  1. value
  2. length

value

valueとは、指定した要素に付与されているクラス名を取得するプロパティになります。

● index.html

● style.css

● main.js

実行結果

classListのvalueでクラス名を取得した結果

valueによって指定した要素のクラス名を取得しています。

そのため、「obj color shape」が画面に表示されています。

length

lengthとは、指定した要素に付与されているクラスの数を取得するプロパティになります。

● index.html

● style.css

● main.js

実行結果

classListのlengthでクラス数を取得した結果

lengthによって指定した要素に付与されているクラスの個数を取得しています。

今回は3つのクラスが付与されているため、「3」が画面に表示されています。

もし、lengthについて詳しく知りたい場合は下記の記事をご参考下さい。

classListで使用できるメソッドの一覧

classListのメソッドを使用することで、指定した要素に付与されているクラスに対して処理を行うことがでいます。

そのため、ここではclassListで使用できるメソッドの一覧をご紹介します。

  1. add()
  2. remove()
  3. toggle()
  4. contains()
  5. replace()
  6. entries()
  7. keys()
  8. values()
  9. toString()
  10. foreach()

add()

add()とは対象の要素に指定したクラスを追加するメソッドになります。

引数にクラス名を指定することで、対象の要素に指定したクラスが追加されるようになります。

● index.htm

● style.css

● main.js

実行結果

classListのadd()で対象の要素にクラスを追加した結果

実行結果(ソースコード)

classListのadd()で対象の要素にクラスを追加した時のソースコード

add()によってクラスの追加を行っています。

そのため、ボタンをクリックすると要素の色が変化しています。

また、ソースコードを確認すると、「color」クラスが追加されています。

もし、add()について詳しく知りたい場合は下記の記事をご参考ください。

remove()

remove()とは対象の要素に付与されているクラスを取り除くメソッドになります。

引数にクラス名を指定することで、対象の要素に付与されているクラスが取り除かれるようなります。

● index.htm

● style.css

● main.js

実行結果

classListのremove()で対象の要素に付与されているクラスを取り除いた結果

実行結果(ソースコード)

classListのremove()で対象の要素に付与されているクラスを取り除いた時のサンプルコード

remove()によってクラスの削除を行っています。

そのため、ボタンをクリックすると、要素の色が変化しています。

また、ソースコードを確認すると、「color」クラスが削除されています。

もし、remove()について詳しく知りい場合は下記の記事をご参考ください。

toggle()

toggle()とは対象の要素のクラスの付与や剥奪を切り替えるメソッドになります。

引数にクラス名を指定することでクラスが付与されたり剥奪されたりされます。

● index.htm

● style.css

● main.js

実行結果

classListのtoggle()で対象の要素のクラスの付与や剥奪を切り替えた結果

実行結果(ソースコード)

classListのtoggle()で対象の要素のクラスの付与や剥奪を切り替えた時のサンプルコード

toggle()で指定したクラスの付与と剝奪の切り替えを行っています。

そのため、ボタンをクリックするたびに要素の色が変化しています。

また、ソースコードを確認すると、「color」クラスがついたり消えたりしています。

もし、toggle()について詳しく知りたい場合は下記の記事をご参考ください。

contains()

contains()とは要素に指定したクラスが付与されているかどうかを確認するメソッドとなります。

引数にクラス名を指定し、付与されている場合は「true」、付与されていない場合は「false」の真偽値で返されるようになります。

● index.html

● style.css

● main.js

実行結果

classListのcontains()で要素に指定したクラスが付与されているかどうかを確認した結果

実行結果(ソースコード)

classListのcontains()で要素に指定したクラスが付与されているかどうかを確認した時のサンプルコード

contains()で要素に指定したクラスが付与されているかどうかを確認しています。

今回は「color1」クラスが付与されているかを条件としているため、ボタンをクリックするたびに要素の色が変化しています。

また、ソースコードを確認すると「color1」クラスが「color2」クラスに切り替わっています。

replace()

replace()とは対象の要素に付与されているクラスを別のクラスに置き換えるメソッドになります。

1つ目と2つ目の引数にクラス名を指定することで、1つ目のクラス名を2つ目のクラス名に置き換えます。

● index.html

● style.css

● main.js

実行結果

classListのreplace()でクラスを指定したクラスで置き換えた結果

実行結果(ソースコード)

classListのreplace()でクラスを指定したクラスで置き換えた時のサンプルコード

replace()でクラスを指定したクラスで置き換えています。

そのため、ボタンをクリックすると要素の色が変化しています。

また、ソースコードを確認すると「color1」クラスから「color2」クラスに置換されています。

entries()

entries()とは対象の要素に付与されているクラスをオブジェクトで取得するメソッドになります。

● index.html

● style.css

● main.js

実行結果

classListでentries()を使用してクラスオブジェクトを取得した結果

entries()を使用してクラスオブジェクトを取得しています。

そのため、指定した要素に付与されているクラス名がキーと一緒に画面に表示されています。

keys()

keys()とは対象の要素に付与されているクラスのオブジェクトのキーを取得するメソッドになります。

オブジェクトのキーにはインデックスが格納されており、割り振られる番号は0からになります。

● index.html

● style.css

● main.js

実行結果

classListでkeys()を使用してクラスオブジェクトのキーを取得した結果

keys()でクラスオブジェクトのキーを取得しています。

今回、指定した要素には3つのクラスが付与されているため「0,1,2」が表示されています。

values()

values()とは対象の要素に付与されているクラスのオブジェクトの値を取得するメソッドになります。

オブジェクトの値にはクラス名が格納されています。

● index.html

● style.css

● main.js

実行結果

classListでvalues()を使用してクラスオブジェクトの値を取得した結果

values()でクラスオブジェクトの値を取得しています。

今回、指定した要素には3つのクラスが付与されているため「obj, color, shape」が表示されています。

toString()

toString()とは対象の要素に付与されているクラス名を文字列として取得するメソッドになります。

「クラス1 クラス2」のようにクラス名の間に半角空白を開けた文字列が返されるようになります。

● index.html

● style.css

● main.js

実行結果

classListでtoString()を使用してクラス名を文字列で取得した結果

toString()でクラス名を文字列で取得しています。

そのため、「obj color shape」の文字列が表示されています。

forEach()

forEach()とは配列など格納されている要素に対して順番に処理を行うことができるメソッドになります。

そのため、取得したクラスオブジェクトに対して処理を行うことが可能になります。

● index.html

● style.css

● main.js

実行結果

classListでforEach()を使用してクラスごとに繰り返し処理を行った結果

forEach()でクラスごとに繰り返し処理を行っています。

そのため、「クラス1: obj」、「クラス2: color」、「クラス3: shape」が表示されています。

もし、forEach()について詳しく知りたい場合は下記の記事をご参考ください。

classListのメソッドが動かない場合

classListのメソッドが動かない場合は、使用しているブラウザでclassListがサポートされていない可能性があります。

その場合、classList.jsというライブラリをダウンロードする必要があります。

そのため、このライブラリをダウンロードし、下記のように記述することでclassListがサポートされていないブラウザでも使用することが可能になります。

● index.html

まとめ

⚫︎ classListとは要素に指定したクラスを追加するclassListプロパティである。

⚫︎ classListを使用する理由として、下記のようなメリットがある
・クラスの操作が容易である
・ソースコードの可読性が高くなる
・ブラウザの互換性がある
・セキュリティが高い
・再利用性が高い

⚫︎ classListには下記のようなプロパティを使用できる
・value
(対象の要素に付与されているクラス名を取得する)
・length
(対象の要素に付与されているクラスの個数を取得する)

⚫︎ classListには下記のようなメソッドを使用できる
・add()
(対象の要素に指定したクラスを追加する)
・remove()
(対象の要素に付与されているクラスを削除する)
・toggle()
(対象の要素に指定したクラスの付与と剥奪を切り替える)
・contains()
(対象の要素に指定したクラスが含まれているかどうか確認する)
・replace()
(対象の要素に付与されているクラスを別のクラスに置き換える)
・entries()
(対象の要素に付与されているクラスのオブジェクトを取得する)
・keys()
(対象の要素に付与されているクラスのオブジェクトのキーを取得する)
・values()
(対象の要素に付与されているクラスのオブジェクトの値を取得する)
・toString()
(対象の要素に付与されているクラスを文字列として取得する)
・forEach()
(対象の要素に付与されているクラスごとに繰り返し処理を行う)

⚫︎ classListのメソッドが動かない場合は、「classList.js」というライブラリをダウンロードして使用する