jQueryを使わずにクラスの操作を行うclassListオブジェクトを調べてみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

またまたモダンWeb ―新しいWebプラットフォームの基盤技術を読んで知ったことのメモ。

あるDOM要素に指定のクラスがあるか確認したり、指定のクラスを追加したり削除したりするにはjQueryを使うと簡単にできますが、最近のブラウザのJavaScriptにはclassListというオブジェクトが導入してあるようで、このオブジェクトを使うことにより、クラスの操作が簡単にできるようです。
参考:element.classList – DOM | MDN

例えば、下記のようなHTMLがあるとします。

以下、IDが”js-div”のdiv要素はclassListでの操作用、IDが”jq-div”のdiv要素はjQueryでの操作用に使います。

指定のクラスがあるか確認する

指定のクラスがあるかどうかの確認には、containsメソッドを使う。

クラスの追加・削除を行う

クラスの追加にはadd、クラスの削除にはremoveメソッドを使う。もしかしてjQueryみたいにメソッドチェーンができるんじゃ・・・と思って試してみましたが、ダメでした。

指定クラスの切り替えを行う

指定のクラスがあれば外し、なければ追加するような動作を実現するにはtoggleメソッドを使う。この機能は便利ですね。

なお、classList自体は配列のようになっており、classList[n]のように指定するとn+1番目のクラス名が手に入る。

配列のように使えるので、前に紹介したイテレーションメソッドも使える。

toStringメソッドを使うと、配列のようなカンマ区切りではなく、スペース区切りの値(classNameと同じ)が得られる。

ちなみに、HTML5では、class指定でのDOM取得方法として、getElementsByClassNameメソッドが追加されています。ただ、getElementsByClassNameメソッドが使えるブラウザでは大抵、querySelector(querySelectorAll)メソッドが使えると思うので、そちらを使ってみてもいいと思います。

とはいっても、上記の例の場合はgetElementsByClassNameのほうが高速らしいんですけどね。何百回と試すわけではないのであれば、さほど実感できる違いではないと思います(参考:document.querySelector – Web API インターフェイス | MDN)。

コメントを残す

メールアドレスが公開されることはありません。