【JavaScript】要素にclassを追加・削除する【classList】

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでHTMLの要素にclassを追加・削除するclassListの使い方をご紹介します。

最近JavaScriptの勉強を始めたんだけど、classの追加や削除はどうすればいいんだろう?

上記の疑問にお答えします。

では解説していきます。

はじめに

JavaScriptでHTML要素にclassの追加や削除等の処理をするには、HTML要素を取得する必要があります。処理の流れとしては、下記のようになります。

  • HTMLの要素を取得する
  • 取得した要素にclassListで処理をする
  • 処理結果を得る

順を追って解説します。

HTMLの要素を取得する

JavaScriptでHTMLの要素を取得する方法はいくつかあります。

idで取得する

document.getElementById('idName');

classで取得する

document.getElementsByClassName('className');

タグ名で取得する

document.getElementsByTagName('tagName');

CSSセレクタで取得する(最初に現れる要素のみ)

document.querySelector('selector');

CSSセレクタで取得する(一致する要素すべて)

document.querySelectorAll('selector');

上記のコードでHTMLの要素を取得することができます。取得した結果を変数に代入する場合は下記のようにしましょう。

let element = document.getElementById('idName');

これで取得した要素を変数で扱えるようになります。

注意点として、CSSセレクタで取得するquerySelectorquerySelectorAllを使えばほとんどの要素を取得することができますが、処理の速度は個別で指定する方法に劣るため、極力、個別で指定するように心がけましょう。

これで要素を取得することができるようになりました。続いてclassListの使い方です。

classListとは

classListは指定した要素のclass属性をリストで返すプロパティです。classListを使用することで、class属性の追加、削除、切り替えやclassを持っているかなど、簡単に結果を得ることができるようになります。

classListは下記のメソッドを持っています。

メソッド名説明
add要素にクラスを追加する
remove要素からクラスを削除する
toggle要素が持っている特定のクラスを切り替える
containsクラスを持っているかを確認する

classListでできることは上記表の通りです。jQueryを使用したことがある方であれば、addClass()removeClass()toggleClass()hasClass()をご存知かと思います。classListはそれらと同様の処理になります。

では、実際にclassListを使って取得した要素にclassを追加してみましょう!

要素にclassを追加する

classの追加はclassListのをaddメソッド使用します。「HTMLの要素を取得する」でご紹介した方法で取得した内容と、追加する例を記載しています。

HTML

本項目で使用するHTMLになります。idとclass属性を持たせています。

<div id="el" class="elem">Element</div>
<div class="elem">Element</div>
<div class="elem">Element</div>

JS

スクリプトは記載のコメントをご覧いただければと思います。下記ではitemというclassを追加しています。

// idで取得する場合
document.getElementById("el").classList.add("item");

// classで取得する場合(最初に現れる要素に追加
let elements = document.getElementsByClassName("elem");
elements[0].classList.add("item");

// classで取得する場合(一致するすべての要素に追加)
let elements = document.getElementsByClassName("elem");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.add("item");
});

// タグで取得する場合(最初に現れる要素に追加) 
let elements = document.getElementsByTagName("div");
elements[0].classList.add("item");

// タグで取得する場合(一致するすべての要素に追加)
let elements = document.getElementsByTagName("div");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.add("item");
});

// CSSセレクタ(querySelector)で取得する場合
let elem = document.querySelector(".elem");
elem.classList.add("item");

// CSSセレクタ(querySelectorAll)で取得する場合
let elements = document.querySelectorAll(".elem");

//最初に現れる要素に追加
elements[0].classList.add("item");
//一致するすべての要素に追加
elements.forEach(function (element) {
    element.classList.add("item");
});

要素のclassを削除する

classの削除はclassListremoveメソッドを使用します。

HTML

本項目で使用するHTMLになります。

<div id="el" class="elem item">Element</div>
<div class="elem item">Element</div>
<div class="elem item">Element</div>

JS

スクリプトは記載のコメントをご覧いただければと思います。下記ではitemというclassを削除しています。

// idで取得する場合
document.getElementById("el").classList.remove("item");

// classで取得する場合(最初に現れる要素から削除)
let elements = document.getElementsByClassName("elem");
elements[0].classList.remove("item");

// classで取得する場合(一致するすべての要素から削除)
let elements = document.getElementsByClassName("elem");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.remove("item");
});

// タグで取得する場合(最初に現れる要素から削除)
let elements = document.getElementsByTagName("div");
elements[0].classList.remove("item");

// タグで取得する場合(一致するすべての要素から削除)
let elements = document.getElementsByTagName("div");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.remove("item");
});

// CSSセレクタ(querySelector)で取得する場合
let elem = document.querySelector(".elem");
elem.classList.remove("item");

// CSSセレクタ(querySelectorAll)で取得する場合
let elements = document.querySelectorAll(".elem");

//最初に現れる要素から削除
elements[0].classList.remove("item");

//一致するすべての要素から削除
elements.forEach(function (element) {
    element.classList.remove("item");
});

要素のclassを切り替える

classの切り替えはclassListtoggleメソッドを使用します。toggleメソッドは指定したclassを持っている場合は削除、持っていなければ追加する処理を実行します。

HTML

本項目で使用するHTMLになります。

<div id="el" class="elem item">Element</div>
<div class="elem item">Element</div>
<div class="elem item">Element</div>

JS

スクリプトは記載のコメントをご覧いただければと思います。下記ではitemというclassを切り替えています。

// idで取得する場合
document.getElementById("el").classList.toggle("item");

// classで取得する場合(最初に現れる要素のclassを切り替える)
let elements = document.getElementsByClassName("elem");
elements[0].classList.toggle("item");

// classで取得する場合(一致するすべての要素のclassを切り替える)
let elements = document.getElementsByClassName("elem");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.toggle("item");
});

// タグで取得する場合(最初に現れる要素のclassを切り替える)
let elements = document.getElementsByTagName("div");
elements[0].classList.toggle("item");

// タグで取得する場合(一致するすべての要素のclassを切り替える)
let elements = document.getElementsByTagName("div");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.toggle("item");
});

// CSSセレクタ(querySelector)で取得する場合
let elem = document.querySelector(".elem");
elem.classList.toggle("item");

// CSSセレクタ(querySelectorAll)で取得する場合
let elements = document.querySelectorAll(".elem");

//最初に現れる要素のclassを切り替える
elements[0].classList.toggle("item");

//一致するすべての要素のclassを切り替える
elements.forEach(function (element) {
    element.classList.toggle("item");
});

要素がclassを持っているか確認する

HTML

本項目で使用するHTMLになります。

<div id="el" class="elem item">Element</div>
<div class="elem item">Element</div>
<div class="elem item">Element</div>

JS

スクリプトは記載のコメントをご覧いただければと思います。下記ではitemというclassを持っている場合にtrue、持っていなければfalseを返します。

// idで取得する場合
alert(document.getElementById("el").classList.contains("item"));

// classで取得する場合(最初に現れる要素がclassを持っているか確認)
let elements = document.getElementsByClassName("elem");
alert(elements[0].classList.contains("item"));

// classで取得する場合(一致するすべての要素がclassを持っているか確認)
let elements = document.getElementsByClassName("elem");
Array.prototype.forEach.call(elements, function (element) {
    alert(element.classList.contains("item"));
});

// タグで取得する場合(最初に現れる要素がclassを持っているか確認)
let elements = document.getElementsByTagName("div");
elements[0].classList.contains("item");

// タグで取得する場合(一致するすべての要素がclassを持っているか確認)
let elements = document.getElementsByTagName("div");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.contains("item");
});

// CSSセレクタ(querySelector)で取得する場合
let elem = document.querySelector(".elem");
alert(elem.classList.contains("item"));

// CSSセレクタ(querySelectorAll)で取得する場合
let elements = document.querySelectorAll(".elem");

//最初に現れる要素がclassを持っているか確認
elements[0].classList.toggle("item");

//一致するすべての要素がclassを持っているか確認
elements.forEach(function (element) {
    alert(element.classList.contains("item"));
});

まとめ

最後にclassListの使い方をまとめておきました。elementsの部分は取得した要素に置き換えてご使用ください!

elements.classList.add('className')要素にクラスを追加する
elements.classList.remove('className')要素からクラスを削除する
elements.classList.toggle('className')要素が持っている特定のクラスを切り替える
elements.classList.contains('className')クラスを持っているかを確認する

以上、JavaScriptで要素にclassを追加・削除する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍