`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は以下の引数で実行されます。

currentValue: 現在の要素
currentIndex: 現在の要素のインデックス
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のページをご覧ください。