uhyohyo.net

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

十二章第一回 classList

今度HTML5の仕様が策定され、それに伴って、HTML用DOMにも新しい仕様が加えられました。そこで、この第十二章ではこの新しい仕様について解説します。

HTML5がよく分からないという人は、HTML5講座も書いたのでぜひ読んで下さい。

これらはHTML5で追加された仕様ですから、これらを使いたい時にはページをHTML5で書く必要があります。

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

さて、今回まず紹介するのはclassListです。これは非常に便利です。その名の通り、HTML要素のclass属性を扱うものです。

かなり前になりますが、第二章第六回でclassNameプロパティを紹介しました。たとえば、

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

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

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

ところが、ここからクラスaaaを除去したい場合はどうでしょう。これには多少面倒な処理が必要になります。具体的には、四章第三回で紹介した正規表現を用いることになるでしょう。

以前はそういった面倒な処理をする必要があったのですが、HTML5ではその必要がなくなりました。このような処理を分かりやすく簡潔に行うのがclassListなのです。classListはいくつかのメソッドを持ち、それらによってclass属性をいじることができます。

ちなみに、classListはDOMTokenListというオブジェクトの一種であり、これは「トークン(文字列)のリスト」を表すオブジェクトということになっています。classListというのは実は、その要素が属するクラスのリストを表すものですので、このDomTokenListの意味と合致するということで、classListはDOMTokenListの一種であるということになっています。すなわち、今からclassListのメソッドとして紹介するものは実はDOMTokenListのメソッドであるので、将来的に、classList以外にもDOMTokenListができた場合、それらにも同様のメソッドが使用できます。

contains

ということで、まず紹介するのはcontainsメソッドです。これは、そのリストにある文字列が含まれるかどうかを判定します。判定するということですから、結果は真偽値(trueかfalse)になりますね。

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

element.classList.contains("long")

add・remove

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

追加にはaddremoveを使います。

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

element.classList.add("foo");

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

element.classList.remove("foo");

これらも、従来のHTML+JavaScriptではややこしい処理をする必要がありました。

ちなみに、追加したいのに既にある・あるいは削除したいのに既に無い という場合も、うまく処理してくれるので問題ありません。

従来はclassNameを文字列として直接いじらないといけなかったため、同じクラスを2回書いてしまうとかそういうことがあるかもしれませんでした。そういった問題から解放されるので、これはいいですね。

toggle

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

例えば

element.classList.toggle("foo");

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

item

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

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

getElementsByClassName

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

これは非常に便利なもので、HTML5で仕様に組み入れられました。今までは、classListも無い中、全ノードを列挙して1つずつ探す必要がありましたが、これがあれば非常に楽です。ぜひ活用しましょう。