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

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

本記事の内容

  • JavaScriptでHTMLの要素を取得する方法を解説
  • classListとは? classListの使い方
  • 取得した要素にclassListで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 elements = 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をしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊です。

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