JavaScriptのclassListを使ったクラス操作の基本を完全解説！初心者向けDOM操作入門

1. JavaScriptのDOM操作とクラスの関係

1. JavaScriptのDOM操作とクラスの関係

JavaScriptのDOM操作とは、Webページに表示されているHTMLの内容や見た目を、あとから変更する仕組みです。その中でもクラス操作は、デザインを切り替えるためによく使われます。

クラスとは、HTML要素に付ける名前のようなものです。同じクラス名を付けた要素は、同じ見た目や動きをします。

たとえば「赤く表示する」「文字を大きくする」といった見た目のルールを、クラスとしてまとめておくイメージです。

2. classListとは何か

2. classListとは何か

classListは、HTML要素に付いているクラスを、JavaScriptから簡単に操作するための仕組みです。

難しい言葉に見えますが、「クラスの一覧表」だと思うと理解しやすくなります。その一覧に対して、追加したり、削除したりできます。

昔は文字列としてクラスを書き換えていましたが、classListを使うと安全でわかりやすく操作できます。

3. classList.addでクラスを追加する

3. classList.addでクラスを追加する

classList.addは、要素に新しいクラスを追加する方法です。シールを一枚貼るような感覚です。

<p id="text">ここに文章があります</p>

const text = document.getElementById("text");
text.classList.add("highlight");

このコードを実行すると、text要素にhighlightクラスが付きます。CSSでそのクラスに色などを設定していれば、見た目が変わります。

4. classList.removeでクラスを削除する

4. classList.removeでクラスを削除する

classList.removeは、付いているクラスを取り外す方法です。貼っていたシールをはがすイメージです。

text.classList.remove("highlight");

これにより、highlightクラスが消え、元の見た目に戻ります。

5. classList.toggleでクラスを切り替える

5. classList.toggleでクラスを切り替える

classList.toggleは、クラスがあれば削除し、なければ追加する便利な方法です。

スイッチのように、オンとオフを切り替える動作だと考えるとわかりやすいです。

text.classList.toggle("highlight");

ボタンを押すたびに色が付いたり消えたりする動きは、このtoggleがよく使われています。

6. classList.containsで確認する

6. classList.containsで確認する

classList.containsは、特定のクラスが付いているかを調べる方法です。

これは「そのシールは貼られていますか？」と確認するようなものです。

const result = text.classList.contains("highlight");
console.log(result);

true または false

条件分岐と組み合わせることで、状態に応じた処理ができます。

7. classList操作が使われる身近な例

7. classList操作が使われる身近な例

メニューの開閉、エラーメッセージの表示、選択中のボタンの強調など、身近なWebページの多くでclassListが使われています。

見た目を直接いじるのではなく、クラスを付け替えることで、管理しやすく安全なコードになります。

classListの基本を理解すると、Webページが動いて見える理由がはっきりしてきます。