女性向けエンジニアスクール
3秒でわかる
HTML要素のCSSクラスを追加・削除・切り替えできるDOMのAPI。JavaScriptから見た目を変える標準的な手段です。
30秒図解
もう少し詳しく
どういうものか
classList は、HTML要素が持つ class 属性をひとつずつ操作するためのプロパティです。文字列ではなくDOMTokenListという集合として扱えるため、他のクラスを壊さずに1つだけ足したり外したりできます。使うメソッドは add、remove、toggle、contains、replace の5つで、この5つでほぼすべての用途が足ります。
なぜ必要か
JavaScriptから直接 element.style.backgroundColor = "red" と書くこともできますが、見た目の定義がCSSとJSに散らばり、あとから色を変えるときにどちらを直せばよいか分からなくなります。クラスの付け外しで状態だけを操れば、見た目の定義はCSSに一本化できます。また className に文字列を代入する書き方は、既存のクラスをまるごと上書きしてしまい、他の機能が付けたクラスを消す事故につながります。
具体例
const panel = document.querySelector("#panel");
const button = document.querySelector("#toggle");
button.addEventListener("click", () => {
const opened = panel.classList.toggle("is-open"); // 戻り値は付いたかどうか
button.setAttribute("aria-expanded", String(opened));
});
panel.classList.add("card", "shadow"); // 複数まとめて追加できる
panel.classList.remove("is-loading"); // 無いクラスを消してもエラーにならない
panel.classList.replace("theme-dark", "theme-light");
if (panel.classList.contains("is-open")) {
console.log("開いている");
}対応するCSS側では .is-open というセレクタに表示用のスタイルを書き、状態を表すクラスへ見た目を紐づけます。
つまずきやすいところ
add("is-open active") のように空白入りの1文字列を渡すとエラーになります。空白は区切りではなく不正な文字として扱われるため、複数指定するときは引数を分けます。toggle の第2引数に真偽値を渡すと強制的に付ける外すを指定できるので、条件分岐を書くより短くなります。もうひとつの定番は、要素の取得に失敗して null に対して classList を触り、Cannot read properties of null で止まるパターンです。スクリプトを head に書いてDOM構築前に走らせている場合に起きます。
似た用語との違い
| 書き方 | 挙動 |
|---|---|
classList.add("x") | 既存クラスを保ったまま x を追加 |
className = "x" | クラス全体を x で置き換える |
setAttribute("class", "x") | className と同じく全置換 |
