【JavaScript入門】要素のクラスを操作するメソッド

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

要素のクラスを操作するメソッド

　ボタンを押した瞬間にメニューが点滅したり、スクロールすると見出しがふわっと現れたり。そんな演出のほとんどは クラスの付け替え だけで実現できます。DOM では element.classList がクラス操作専用の API を提供しており、1 行で追加・削除・トグルが可能です。ここでは classList が持つ代表メソッドを整理し、実際にクラスを付けたり外したりしてスタイルが切り替わるデモを作成します。

１．classList と DOMTokenList

1.1. classList とは

　Element.classList は DOMTokenList インスタンスで、要素の class 属性をトークン（単語）として管理するコレクションです。forEach() や entries() など配列ライクなメソッドも備えています。

1.2. クラス操作メソッド一覧

メソッド	機能	戻り値
`add(token)`	クラスを追加	なし
`remove(token)`	クラスを削除	なし
`toggle(token)`	付いていれば外し、無ければ付ける	`true`(追加) / `false`(削除)
`contains(token)`	クラスを持つか判定	真偽値

２．基本操作パターン

2.1. 追加・削除

btn.classList.add('active');
btn.classList.remove('disabled');

2.2. トグルと判定

panel.classList.toggle('open');     // 開閉スイッチ
if (panel.classList.contains('open')){
  console.log('パネルは開いています');
}

３．実践サンプル ― 3 秒だけ警告スタイルを付与

ファイル名：class-list-demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素のクラスを操作するメソッド</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/* 警告スタイル */
.caution li:nth-of-type(odd){
  background:#ff0;color:#000;
}
.caution li:nth-of-type(even){
  background:#000;color:#ff0;
}
li{margin:.3rem 0;padding:.2rem .4rem}
</style>
</head>
<body>
<h2>☕ 本日のメニュー</h2>

<ul id="menu">
  <li>ホットコーヒー</li>
  <li>アイスコーヒー</li>
  <li>チーズケーキ</li>
</ul>

<script>
// 1) 要素取得
const menu = document.querySelector('#menu');

// 2) クラス追加 → 見た目が反転
menu.classList.add('caution');

// 3) 3 秒後にクラス削除して元に戻す
setTimeout(() => {
  menu.classList.remove('caution');
}, 3000);

// 4) デバッグ用に状態を表示
console.log('追加直後 contains:', menu.classList.contains('caution')); // true
setTimeout(()=>{
  console.log('削除後 contains:', menu.classList.contains('caution')); // false
}, 3100);
</script>
</body>
</html>

ブラウザ挙動

ページ読み込み直後に menu へ caution クラスが付与され、奇数行が黄背景・偶数行が黒背景に。
3 秒後 remove() が実行され通常スタイルへ戻る。
コンソールには contains() の結果が true → false と表示され、クラスの有無が確認できる。

ブラウザの出力例

デバックコンソールの出力

追加直後 contains: true
削除後 contains: false

プログラム解説

ステップ	内容	使ったメソッド
2	`classList.add('caution')`	追加
3	`classList.remove('caution')`	削除
4	`classList.contains('caution')`	判定

toggle() を使えば add と remove を 1 行にまとめることも可能です。

まとめ

classList はクラス名をトークンとして管理する DOMTokenList。
add / remove / toggle / contains の 4 メソッドでほぼすべてのクラス操作が完結。
スタイルやアニメーションは CSS に任せ、JavaScript はクラス付け替えだけに集中するとコードがシンプルになる。

　クラス操作はインタラクティブ UI の基礎。ぜひサンプルを改造し、クリックやスクロールイベントと組み合わせてみてください。

【JavaScript入門】要素のクラスを操作するメソッド