classList

classList・・・

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

add・・・クラスを追加

remove・・・クラスを削除

contains・・・クラスが含まれているか確認する

toggle・・・クラスが含まれていれば削除、含まれていなければ追加する

実際にサンプルを見てみましょう。

cssファイルに下記のコードがあったとします。

.purple {

color: #7b07ff;

}

「h2」が目次の部分になります。

　h2.classList.add('purple')

「add」を記述することで「目次」の色が紫に変わります。つまり、クラスが追加されたことになります。

もし

　h2.classList.remove('purple')

「remove」を記述すると、クラスが削除され「目次」の色が黒に戻ります。

そして「contains」はクラスがあるか確認できます。

h2.classList.contains('purple')

// true

「h2」はすでにクラスが追加されているので、「true」が返ってきているのがわかります。

最後に便利なメソッドがあります。

それが「toggle」です。

クラスを切り替える（あれば削除、なければ追加する）

h2.classList.toggle('purple')

// false

h2.classList.toggle('purple')

// true

h2.classList.toggle('purple')

// false

h2.classList.toggle('purple')

// true

「toggle」を使うことで文字を紫や黒に切り替えることができます。（今回の場合）

classList を使用することは、 「element.className」から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な手段となるので紹介しました。