【中学生でもわかる】JavaScript〜classListが超便利！

こんにちは、フローです。

今回は、JavaScriptの素敵な機能、

classListについて簡単に説明しましょう。

1 1. classListとは
2 2. classListの使用場面
- 2.1 3. classListの使用例
3 4. classListの注意点
4 5. まとめ

1. classListとは

HTML要素のclass属性にアクセスするための

JavaScriptのプロパティです。

要素のclassリストを取得したり、

新しいclassを追加したり、

既存のclassを削除したり、

あるいはclassの存在を確認したりできます。

2. classListの使用場面

ウェブページの特定の要素のスタイルを動的に変更するときに非常に便利です。

例えば、

ユーザーがボタンをクリックしたときや、

特定の時間が経過したときに要素の見た目を変更するといった場合によく使用されます。

3. classListの使用例

それでは、具体的な使用例を見てみましょう。以下の3つのパターンを紹介します。

classの追加

let element = document.querySelector("div");
element.classList.add("newClass");

このコードは、”div”要素から”oldClass”というclassを削除します。

classの存在確認

let element = document.querySelector("div");
if (element.classList.contains("queryClass")) {
    console.log("存在します");
} else {
    console.log("存在しません");
}

このコードは、”div”要素が”queryClass”というclassを持っているかどうかをチェックします。

4. classListの注意点

classListは非常に便利な機能ですが、

使用する際に注意すべきポイントが一つあります。

それは、class名に空白文字（スペースやタブなど）を含めることはできないということです。

以下のようなコードはエラーを発生させます。

let element = document.querySelector("div");
element.classList.add("invalid class");

このコードは、

class名に空白文字を含む”invalid class”を追加しようとしているため、

エラーが発生します。

5. まとめ

classListは、HTML要素のclassリストを取得したり、

新しいclassを追加したり、既存のclassを削除したり、

あるいはclassの存在を確認したりするための非常に便利なJavaScriptのプロパティです。

ただし、

class名に空白文字を含めることはできませんので注意が必要です。

この記事が、あなたのJavaScript学習に役立つことを願っています。

レッツチャレンジ！

カテゴリー