はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

classListとは

『classList』とは特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティで、classListの後にメソッドを定義することにより、追加削除などの機能を指定することができる。

classListに用意されているメソッド

メソッド名	機能
add	クラスを追加する
remove	クラスを削除する
contains	クラスが含まれているか確認する
toggle	クラスが含まれていれば削除、含まれていなければ追加する

addメソッドとは

『addメソッド』とは指定した文字列などをclassに対して追加するメソッド。classはHTMLのスタイル指定に使う属性。
JavaScriptでHTMLのタグを取得すると、「classList」がプロパティとして入る。classListは、HTMLのclassの変更や削除などの操作をするメソッドを持っており、その中の要素に対して追加を行うメソッドがaddとなる。

addメソッドの使い方

JavaScriptでエレメントを取得し、.add(【追加するクラス名】)とすることで使用可能。

class属性を追加する方法

addメソッドを使用した場合、HTMLにはclass属性が追加される。
追加するクラス名を複数指定することで、複数のクラスを追加することも可能。

add()　　使用例

sample : 1

① add()はclassの追加ができ、例として、ボタンクリックでclassを追加するようにする。

<div id="sample">サンプル</div>
<button id="btn">変更</button>

② 追加するclassによってスタイルが変わるように適当にCSSを用意。

.is-red {
    color: red;
}
.is-large {
font-size: 28px;
}

③ 追加したいclass名をadd()で指定したら、ボタンクリック時にclassを追加することができる。

document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('sample').classList.add('is-red');
});

sample : ２

① ②を使用する。
③ カンマ区切りで複数のclassも設定できる。ただしIEでは複数指定は対応しておらず、1つ目のclassのみ適用される。

document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('sample').classList.add('is-red', 'is-large');
});

sample : 3

① ②を使用する。
③ 配列の形で複数指定も可能です。 ※ この方法はスプレッド構文を使用しているため、対応していないIEだと構文エラーになる。

let classes = ['is-red', 'is-large'];
document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('sample').classList.add(...classes);
});

sample :4

① classを追加するためのHTMLを準備。　※このコードではclassを変更するdivタグにIDとして、targetという名前をつける。

<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='UTF-8'>
</head>
<body>
  <div id='target' class='red'>ここにclassを追加することでスタイルを変更する</div>
</body>
</html>

② 追加するclassのCSSを準備。　※ここでは、追加されたことがわかるように色をつけるスタイルを3つ用意する。

.red{
  background-color: red;
/*   背景が赤 */
}
.green{
  color: green;
/*   文字が緑 */
}
.blue{
  border: solid 2px blue;
/*   枠線が青 */
}

③ JavaScriptのソースを作成。　※ HTMLのdivタグを取得し、classList.addメソッドで2つのclassを追加。

const div = document.getElementById('target');
div.classList.add('greet','blue');

参考サイト

[JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法を現役エンジニアが解説【初心者向け】]
(https://techacademy.jp/magazine/27026)
[JavaScriptのclassListを使ってみる]
(https://cly7796.net/blog/javascript/how-to-use-classlist/)
[【JavaScript】classListの使い方まとめ(add.remove.contains.toggle)]
(https://qiita.com/tomokichi_ruby/items/2460c5902d19b81cace5)