[JavaScript]classListを使って楽にクラスを操作する

JavaScriptのclassListの使い方について。

わざわざjQueryを使わずともクラス操作が出来てしまう便利機能です。

classListを使ってみる

document.querySelector('.hoge').classList.replace('active', 'non-active');

上記のコードだとhogeクラスを取得して、activeをnon-activeに変換しました。

<div class=’hoge active’> → <div class=’hoge non-active’> こんな感じです。

その他にもclassListには様々なメソッドが用意されています。

ざっくり書くとこんな感じです。