【JavaScript入門】DOM操作でclass属性の追加・削除・存在確認・toggleをする

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作でclass属性の追加・削除・存在確認・toggleをする方法を解説していきます。

1 class 属性を通常の属性操作でする問題点
- 1.1 setAttribute では既存の属性値は上書きされる問題
- 1.2 removeAttribute は指定したすべての属性と紐づく値が消える問題
2 class属性は、classListプロパティで操作する
3 Sample-Code-全文
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 Twitterやってます！Follow Me！
7 参考・引用
8 【おすすめ関連記事】
9 最近の投稿

class 属性を通常の属性操作でする問題点

setAttribute では既存の属性値は上書きされる問題

属性をSetする「setAttribute」では既存の設定値は上書きされて消えてしまいます。

普通は1つのタグに1つの「属性と属性値」(key=”value”)なのでいいのですが、、、

class属性はCSSなどの関係で、1つのタグに複数設定することがあるので、これは困ります。

removeAttribute は指定したすべての属性と紐づく値が消える問題

属性を削除する「removeAttribute」では指定したすべての属性と紐づく属性値が消えてしまいます。

これは先述のとおり、1つのタグに複数設定する可能性のあるclass属性にとっては問題です。

このように class は複数設定することがあるため、通常の属性操作メソッドでは機能不足なのです。

class属性は、classListプロパティで操作する

先述のような問題があるため、class属性をDOM操作するときは、classListプロパティと言うclass属性専用のプロパティを使います。

classの追加

構文: element.classList.add(‘class-name’);

このメソッドは追加なので、既存のclass属性とその値は影響を受けません。

setAttribute の時のような上書きを気にせずに使えます。

<h3 class="robotama">ただのロボ玉🔥</h3>


<script>

const robotama = document.querySelector('.robotama');

// 1. class の追加: element.classList.add('class-name');
robotama.classList.add('puru-puru');

// 2. 追加されているかの確認
const robotamaClass = robotama.classList;
console.log(JSON.stringify(robotamaClass));
    // {"0":"robotama","1":"puru-puru"}

</script>

classの削除

構文: element.classList.remove(‘class-name’);

指定したclassのみが削除されるので、他の classは影響を受けません。


<h3 class="robotama">ただのロボ玉🔥</h3>

<script>

const robotama = document.querySelector('.robotama');

// 1. class の追加: element.classList.add('class-name');
robotama.classList.add('puru-puru');

// 2. 追加されているかの確認
const robotamaClass = robotama.classList;
console.log(JSON.stringify(robotamaClass));
    // {"0":"robotama","1":"puru-puru"}


// 3. class の削除: element.classList.remove('class-name');
robotama.classList.remove('robotama');

// 4. 削除されているかどうかの確認
const robotamaClass2 = robotama.classList;
console.log(JSON.stringify(robotamaClass2));
    // {"0":"puru-puru"}

</script>

classの存在を確認する

構文: let existFlag = element.classList.contains(‘class-name’);

引数の class-name には、存在の確認をしたい class名を指定します。

戻り値は、boolean型になります。存在すればtrue、存在しなければfalseです。

// 5. class の存在を確認する: let existFlag = element.classList.contains('class-name');
// 返り値は、真偽値(true/false)

const robotamaFlag = robotama.classList.contains('robotama');
console.log({robotamaFlag});
    // {robotamaFlag: false}

const puruPuruFlag = robotama.classList.contains('puru-puru');
console.log({puruPuruFlag});
    // {puruPuruFlag: true}

classの「存在/非存在」をtoggleする

構文: element.classList.toggle(‘class-name’);

トグルと言うのは、スイッチのON/OFFのように2つの状態が切り替わる仕組みのことを言います。

classList の toggle は、class の「存在/非存在」を切り替えるメソッドです。

引数の class-name には、「存在/非存在」を切り替える class名を指定します。

引数に指定した classが存在すれば削除、存在しなければ追加します。

<style>
    .gunma-robotama {
        color: red;
        font-size: 38px;
    }
</style>


<h3 id="gunma">神聖グンマー帝国</h3>
<button type="button" onclick="ClassToggle()">万歳🔥</button>


<script>

function ClassToggle (){
    const gunma = document.getElementById('gunma');

    // 6. element.classList.toggle: 存在すれば削除、存在しなければ追加する
    gunma.classList.toggle('gunma-robotama');

    const gunmaClass = gunma.classList;
    console.log(JSON.stringify(gunmaClass));
        // {"0":"gunma-robotama"}
        // {}
        // toggleでSwitchされる！
}

</script>

Sample-Code-全文

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-Class-Test🔥</title>
    <style>
        .gunma-robotama {
            color: red;
            font-size: 38px;
        }
    </style>
</head>
<body>
    
    <h1>DOM-Class操作をするロボ玉🔥</h1>

    <h2>class 属性を通常の属性操作でする問題点🔥</h2>

    <h3>1. setAttribute では既存の属性値は上書きされて、消えてしまいます。</h3>

    <p>普通は、1つのタグに1つの「属性と属性値」(key="value")</p>

    <p>class属性だけは例外で、1つのタグに複数設定することがある！</p>

    <h3>2. removeAttribute は指定したすべての属性と紐づく値が消えてしまいます。</h3>

    <h3>このように class は複数設定することがあるため、通常の属性操作メソッドでは機能不足なのです。</h3>

    <p>上記の2つの特性があるため、class属性をDOM操作するときは、
        <br>
        classListプロパティと言うclass属性専用のプロパティを使います。
    </p>

    <h2>classListで操作する🔥</h2>

    <p>先述のような問題があるため、class属性のDOM操作は、
        <br>
        class操作のためにある classListプロパティを使って操作します。
    </p>

    <h3>1. class の追加: element.classList.add('class-name');</h3>
    <p>このメソッドは追加なので、既存のclass属性とその値は影響を受けません。
        <br>
        setAttribute の時のような上書きを気にせずに使えます。
    </p>

    <h3>2. class の削除: element.classList.remove('class-name');</h3>
    <p>指定したclassのみが削除されるので、他の classは影響を受けません。</p>

    <h3>3. class の存在を確認する: let existFlag = element.classList.contains('class-name');</h3>
    <p>引数の class-name には、存在の確認をしたい class名を指定します。
        <br>
        戻り値は、boolean型になります。存在すればtrue、存在しなければfalseです。
    </p>

    <h3>4. classのトグル・Switch</h3>
    <h3>element.classList.toggle();</h3>

    <p>存在すれば削除、存在しなければ追加する。</p>

    <p>トグルと言うのは、スイッチのON/OFFのように2つの状態が切り替わる仕組みのことを言います。</p>
    <p>class の toggle は、class の「存在/非存在」を切り替えるメソッドです。</p>
    <p>引数の class-name には、「存在/非存在」を切り替える class名を指定します。</p>
    <p>引数に指定した classが存在すれば削除、存在しなければ追加します。</p>

    <h2>Text-DOM-操作🔥</h2>

    <h3 class="robotama">ただのロボ玉🔥</h3>

    <h3 id="gunma">神聖グンマー帝国</h3>
    <button type="button" onclick="ClassToggle()">万歳🔥</button>

    <script>

        const robotama = document.querySelector('.robotama');

        // 1. class の追加: element.classList.add('class-name');
        robotama.classList.add('puru-puru');

        // 2. 追加されているかの確認
        const robotamaClass = robotama.classList;
        console.log(JSON.stringify(robotamaClass));
            // {"0":"robotama","1":"puru-puru"}


        // 3. class の削除: element.classList.remove('class-name');
        robotama.classList.remove('robotama');

        // 4. 削除されているかどうかの確認
        const robotamaClass2 = robotama.classList;
        console.log(JSON.stringify(robotamaClass2));
            // {"0":"puru-puru"}


        // 5. class の存在を確認する: let existFlag = element.classList.contains('class-name');
        // 返り値は、真偽値(true/false)

        const robotamaFlag = robotama.classList.contains('robotama');
        console.log({robotamaFlag});
            // {robotamaFlag: false}

        const puruPuruFlag = robotama.classList.contains('puru-puru');
        console.log({puruPuruFlag});
            // {puruPuruFlag: true}


        function ClassToggle (){
            const gunma = document.getElementById('gunma');

            // 6. element.classList.toggle: 存在すれば削除、存在しなければ追加する
            gunma.classList.toggle('gunma-robotama');

            const gunmaClass = gunma.classList;
            console.log(JSON.stringify(gunmaClass));
                // {"0":"gunma-robotama"}
                // {}
                // toggleでSwitchされる！
        }

    </script>
</body>
</html>