4章 クラスの操作

本章ではクラスの操作について学びます。クラスは属性なので、前の章で学んだ属性の操作はそのままクラスにも適用することができます。しかし、通常の属性操作をクラスに対して使うと不便なことが多いのです。なぜかというと、クラスは複数の値を設定することがあるからです。class属性はスペースで区切ることにより、複数の値を持たせることができます。複数の値を操作をする上で、通常の属性操作は機能不足なのです。まずは、通常の属性操作でクラスを操作することの問題点を示し、その後にクラス専用の操作方法を学びます。

4.1 通常の属性操作の問題点

クラスは属性であることには変わりないので、前の章で学んだことをそのまま使うことができます。復習も兼ねて見ていきましょう。

<h1 class="title">タイトル</h1>
//h1の要素を取得
var h = document.querySelector('h1');

//クラスを取得
var c = h.getAttribute('class');

//クラスを設定
h.setAttribute('class', 'sub_title');

//クラスを削除
h.removeAttribute('class');

このように、クラスの取得、変更、削除ができます。今のところ、まったく問題ありません。問題となるのは複数のクラスを扱う時です。

<a class="btn">ボタン</a>

a要素にクラスbtnが設定されています。さて、a要素にクラスactiveを追加することを考えます。「追加」なのでbtnは残したままにする必要があります。しかし、setAttributeでは既存の属性値は消えてしまいます。そのため、既存のクラスはそのまま残しておくには、以下のようなコードになります。

//h1の要素を取得
var a = document.querySelector('a');

//既存のクラスを取得
var c = a.getAttribute('class');

//activeを追加
a.setAttribute('class', c + ' active');

既存のクラスを残しておくために、まずはgetAttributeで既存の値を取得し、さらにsetAttributeで現在の値と新しい値をスペースを付けて連結しなければなりません。

他の例を考えてみると、例えばクラスbtnとactiveが設定されているときに、activeだけを削除したいときもremoveAttributeでは難しいことがわかります。removeAttributeはすべての値が消えてしまうので、消した後に必要なものを再度設定し直すといったことをしなければなりません。

このようにクラスは複数設定できるという特性のために、通常の属性操作メソッドでは機能不足なのです。

4.2 classList

クラス専用の操作をするためのclassListというプロパティがあります。クラスを複数管理できるのでListという名前が付いています。このプロパティを使えば、クラスの追加、削除が簡単にできます。

クラスの追加はaddメソッドを使います。

element.classList.add(class);

引数classに追加するクラス名を指定します。このメソッドは追加なので、既存の値はまったく影響を受けません。上書きを気にせずに使うことができます。

クラスの削除はremoveメソッドです。

element.classList.remove(class);

引数classに削除するクラス名を指定します。これも指定したクラスのみが削除されるので他のクラスは影響を受けません。

具体例を見てみましょう。

<a class="btn">ボタン</a>
//aの要素を取得
var a = document.querySelector('a');

//クラスactiveを追加
a.classList.add('active');

//クラスactiveを削除
a.classList.remove('active');

classListによるクラスの追加は既存のクラスは消えないし、クラスの削除も指定したものだけが消えてくれるので便利です。

4.3 クラスの存在確認

classListには追加、削除の他にも便利なメソッドがあります。その1つが、あるクラスがその要素に存在するかを確認するメソッド、containsです。

element.classList.contains(class);

引数classには存在確認するクラス名を指定します。戻り値はboolean型になります。存在すればtrue、しなければfalseが返ります。

具体例を見てみましょう。

//クラスactiveが存在するか?
if(a.classList.contains('active')){
    alert('activeは存在します');
} else {
    alert('activeは存在しません');
}

4.4 クラスのトグル

classListの便利機能にもう一つ、クラスのトグルがあります。トグルというのはスイッチのON/OFFのように2つの状態が切り替わる仕組みのことをいいます。クラスのトグルは、クラスの存在/非存在を切り替えます。toggleメソッドを使います。

element.classList.toggle(class);

引数classにはトグルするクラス名を指定します。引数に指定したクラスが存在すれば削除、存在しなければ追加します。

具体例を見てみましょう。

<a class="btn active">ボタン</a>
//クラスのトグル
//activeが存在するので、削除
a.classList.toggle('active');

//今度は存在しないので、追加
a.classList.toggle('active');

これはボタンクリック時などのイベント処理でよく使います。便利な機能なので是非覚えてください。

4.5 まとめ

今回はクラス専用の操作について学びました。クラスの操作時はclassListを使うと覚えておけば間違いありません。

  • classList.add
  • classList.remove
  • classList.contains
  • classList.toggle
Last Updated: 2018-5-10 17:49:38