uhyohyo.net

JavaScript初級者から中級者になろう

十二章第一回　classList

このページの最終更新日：

この章のテーマはHTML5です。HTML5は新世代のHTMLで、2010年代に入ってから普及が始まりました。この講座を最初に書いた当時はHTML5は最先端の技術でしたが、何回かの改稿を経た今（2017年9月）となってはごく当たり前の技術となっています。

この章ではHTML5に関連する内容を解説します。というのも、HTML5の策定に伴ってHTML用のDOMにも新しくて便利な仕様が加えられました。

HTML5がよく分からないという人は、昔書いたHTML5講座も合わせて読むといいでしょう。

また、この章では、HTML5とは直接の関係が無いもののHTML5の時代に出現してきたような新しいAPIについても解説していきます。

さて、今回まず紹介するのはclassListです。これは非常に便利です。名前から想像がつくかもしれませんが、これはHTML要素のclass属性を扱うものです。

かなり前になりますが、以前classNameプロパティを紹介しました。これはclass属性を文字列で参照・設定できるプロパティでした。例えば、


<div class="aaa"></div>

というdiv要素ならばそのclassNameプロパティは"aaa"です。

ここに新しいクラスbbbを追加したいならば、className += " bbb"としてやることでclassNameは"aaa bbb"となります。

ところが、ここからクラスaaaを除去したい場合はどうでしょう。これには多少面倒な処理が必要になります。一例としては、正規表現を用いる方法があるでしょう。

このように、以前はclass属性をいじるためには文字列をなんとかして操作する必要がありました。しかし、HTML5ではその必要はありません。今回紹介するclassListを用いると、クラスの追加・除去といった処理をより分かりやすく簡単に行うことができます。classListはいくつかのメソッドを持ち、それらによってclass属性をいじることができます。

ちなみに、classListは仕様上はDOMTokenListというオブジェクトのインスタンスであり、これは「トークン（文字列）のリスト」を表すオブジェクトということになっています。

class属性は複数のクラスがスペースで区切られて並べられているものですので、DOMTokenListで表すことができます。

今から紹介するclassListのメソッドは正確にはDOMTokenListのメソッドですから、同じようにDOMTokenListで表されている他の属性も同様の方法で操作することができます。

contains

ということで、まず紹介するのはcontainsメソッドです。これは、指定したクラスがclass要素に含まれるかどうかを判定します。判定するということですから、結果は真偽値（trueかfalse）になりますね。

例えば、ある要素がクラス"long"に属しているかどうかは次のように書きます。


element.classList.contains("long")

add・remove

そして、このclassListを通して要素が属するクラスを変更することもできます。これらは、classListにクラスを追加、あるいは削除するという形で表されます。

追加にはadd・removeを使います。

例えば、ある要素にクラス"foo"を追加したい場合は次のようにします。


element.classList.add("foo");

逆に、ある要素からクラス"foo"を削除したい場合にはこうです。


element.classList.remove("foo");

これらのメソッドは、追加したいクラスが既にある・あるいは削除したいのに既に無いという場合もうまく処理してます。

toggle

さらに便利かもしれないのが、toggleです。これは、指定したクラスの有る無しを切り替えるというものです。つまり、既にそのクラスがある場合は無くし、まだ無い場合はクラスを追加します。これにより、例えば「クリックすると表示・非表示を切り替え」なんてものを作りたい場合に、今表示しているかどうかを何かのクラスで表すとすれば、toggleだけでそれを実現することができます。

例えば


element.classList.toggle("foo");

こうすることで、クラスfooが無い場合は追加、ある場合はそれを取り除きます。

item

これは使う機会があまり多くないかもしれませんが、リストの各要素には配列のように通し番号がふってあって、itemメソッドで、各番号のトークン（クラス名）を得ることができます。また、そのためのlengthプロパティもあります。

以上、classListを紹介しました。使いどころを見つければ非常に便利ですので、活用しましょう。

getElementsByClassName

おまけとしてgetElementsByClassNameを紹介しておきます。これは、「あるクラスに属する要素を列挙する」というメソッドです。使い方はgetElementsByTagNameと同じですが、要素名の代わりにクラス名を引数として渡します。返り値は、getElementsByTagNameと同じくNodeListです。

これもHTML5で仕様に組み入れられました。