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

こんにちは、Ryohei（@ityryohei）です！

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

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

では解説していきます。

はじめに

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セレクタで取得するquerySelectorとquerySelectorAllを使えばほとんどの要素を取得することができますが、処理の速度は個別で指定する方法に劣るため、極力、個別で指定するように心がけましょう。

これで要素を取得することができるようになりました。続いて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の削除はclassListのremoveメソッドを使用します。

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の切り替えはclassListのtoggleメソッドを使用します。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を追加・削除する方法のご紹介でした！