【JavaScript】HTMLのクラスを操作するには？〜classListの使い方〜

classList

HTMLの要素（Element）にはclassListプロパティがあります。
classListの中身はオブジェクトになっていて、そこにはclass属性を変更するための便利なメソッドが揃っています。

const element = document.getElementById('変更したい要素のid')
element.classList // オブジェクトが入っている

基本的にはここから変更するのがおすすめです。

DOMTokenList

classListプロパティに入っているのは、DOMTokenListのインスタンスです。
DOMTokenListはスペース（ ）で区切られた文字列を示し、これを変更するためのメソッドがいくつかあります。

• add
• remove
• toggle
• etc...

class属性に入る文字列はスペース区切りなので、DOMTokenListが使えるといった感じです。

DOMTokenListのインスタンスを自分で作成することは、おそらく不可能です。
newしようとしてもエラーになってしまいます。

const list = new DOMTokenList()
// Uncaught TypeError: Illegal constructor

おそらくと言ったのは、DOMTokenListのコンストラクタに関する情報が見つけられなかったからです。
MDNに載ってなかったので多分無理なのでしょう。

className

クラスを示す文字列であるclassNameプロパティというものもあります。

classNameを変更することでもクラスを操作できますが、classListのほうがいろいろと便利なので、基本的にはclassListがおすすめです。

なお、classNameはclassListの変更と連動しています。
そのためclassListを変えるとclassNameも変わり、逆もまた然りです。

メソッド

ここからはDOMTokenListのメソッド、つまりHTML要素のクラスを操作する具体的な方法を紹介します。

add

要素にクラスを追加します。

• 引数: 追加したいクラス（群）
• 戻り値: なし

const elem = document.getElementById('id')
elem.className // 'class1'

elem.classList.add('class2') // class2というクラスを追加する
elem.className // 'class1 class2'

elem.classList.add('class3', 'class4') // class3とclass4を追加する
elem.className // 'class1 class2 class3 class4'

remove

要素からクラスを削除します。

• 引数: 削除したいクラス（群）
• 戻り値: なし

const elem = document.getElementById('id')
elem.className // 'class1 class2 class3'

elem.classList.remove('class1') // class1というクラスを削除する
elem.className // 'class2 class3'

elem.classList.remove('class2', 'class3') // class2とclass3を削除する
elem.className // ''

toggle

クラスがすでに存在するなら削除し、存在しなければ追加します。
名前の通りクラスのある / ないを切り替えるようなメソッドです。

• 引数:
  1. トグルしたいクラス
  2. どちらかの操作を強制的に行うためのフラグ（オプション）
• 戻り値: クラスを追加したらtrue、クラスを削除したらfalse

const elem = document.getElementById('id')
elem.className // 'class1'

elem.classList.toggle('class2') // class2を追加する、true
elem.className // 'class1, class2'

elem.classList.toggle('class2') // class2を削除する、false
elem.className // 'class1'

contains

クラスが含まれるかどうかを判定するメソッドです。

• 引数: 含まれるかどうか調べたいクラス
• 戻り値: 含まれているかどうかを示すboolean

const elem = document.getElementById('id')
elem.className // 'class1'

elem.contains('class1') // true
elem.contains('class2') // false

elem.classList.add('class2') // class2を追加する
elem.contains('class2') // true

なお、containsとaddとremoveを組み合わせることで、toggleのような処理ができます。

if (elem.contains(className)) {
  elem.remove(className)
} else {
  elem.add(className)
}

replace

既存のクラスを別のクラスで置き換えるメソッドです。

• 引数:
  1. oldToken: 置き換える対象となるクラス
  2. newToken: oldTokenを置き換えた後のクラス
• 戻り値: 置き換えられたか（oldTokenが見つかったか）を示すboolean

const elem = document.getElementById('id')
elem.className // 'class1 class2'

elem.classList.replace('class1', 'class3') // class1をclass3にする
elem.className // 'class3 class2'

forEach

全てのクラス名でループするメソッドです。
これは配列のforEachに似た動きをします。

• 引数: 各ループで実行する関数（callbackFn）
• 戻り値: undefined

また、callbackFnは以下の引数で実行されます。

1. currentValue: 現在の要素
2. currentIndex: 現在の要素のインデックス
3. listObj: 実行されているDOMTokenList

const elem = document.getElementById('id')
elem.className // 'class1 class2'

elem.classList.forEach(current => {
  console.log(`クラス: ${current}`)
})

// クラス: class1
// クラス: class2

プロパティ

ここで一度プロパティの紹介に移ります。

value

クラス名を示す文字列（半角スペース 区切り）です。
classNameとclassList.valueは基本的に同じ値になります。

const elem = document.getElementById('id')
elem.className // 'class1 class2'
elem.classList.value // 'class1 class2'

length

クラスがいくつ含まれているかを示す数値です。

const elem = document.getElementById('id')
elem.className // 'class1 class2'
elem.length // 2

elem.classList.remove('class1')
elem.length // 1

その他のメソッド

DOMTokenListには、ここで紹介した以外にも以下のメソッドがあります。

• items: インデックスに対応するクラスを返す
• values: 全てのクラス名を処理できるイテレーターを返す
• keys: キー（0, 1, ...）を処理できるイテレーターを返す
• entries: キーと値の両方を処理できるイテレーターを返す
• supports

詳細は各リンクから飛べるMDNのページをご覧ください。