JavaScriptのclassListの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのclassListの使い方について現役エンジニアが解説しています。classListとは、対象要素に設定しているクラスを配列のように扱えるオブジェクトです。add(追加)やremove(削除)やreplace(置き換え)などのメソッドがあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのclassListの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのclassListの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

classListとは

classListとは、対象要素に設定しているクラスを配列のように扱えるオブジェクトになります。

HTML
 

<div id="hoge" class="class1 class2 class3"></div>

 

JavaScript
 

var hoge = document.getElementById('hoge');

console.log(hoge.classList);

// DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]

 

classListの主なメソッド

classListに用意されているメソッドは以下のようになります。

  • add( className ) : クラスを追加
  • remove( className ) : クラスを削除
  • toggle( className ) : クラスがあれば削除・無ければ追加
  • contains( className ) : クラス名の有無を true / false で返す
  • replace( oldClass, newClass ): oldClassをnewClassで置き換え

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

 

<div id="hoge"></div>

 

クラスを追加する
 

var hoge = document.getElementById('hoge');

hoge.classList.add('addclass1');

// <div id="hoge" class="addclass1"></div>

 

クラスを削除する
 

hoge.classList.remove('adclass1');

// <div id="hoge"></div>

 

クラス名の存在確認

 

<div id="hoge" class="huga"></div>

var hoge = document.getElementById('hoge');

hoge.classList.contains('huga'); // true

hoge.classList.contains('hoge'); // false

 

特定のクラスの切り替えを行う
 

<div id="hoge"></div>

var hoge = document.getElementById('hoge');

hoge.classList.toggle("toggleClass1")

// <div id="hoge" class="toggleClass1"></div>

hoge.classList.toggle("toggleClass1")

// <div id="hoge"></div>

 

クラスの置換を行う
 

<div id="hoge" class="firstclass"></div>

var hoge = document.getElementById('hoge');

hoge.classList.replace("firstclass", "secondclass");

// <div id="hoge" class="secondclass"></div>

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。