JavaScript HTML5で追加された classList API
2012.10.30
この記事は最終更新日から1年以上が経過しています。
ども。
最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。
皆さんはどの様にclassを取得していますか？
え？取得しない？
そんな取得しない方々にも簡単に取得出来る世の中になりました。
今回はclassListについてです。
jQueryのaddClassやremoveClassみたいなことが生のjavascriptでも行えるようになったのです。
（古いブラウザなどは対応していませんのでご注意を）
基本的な使用方法
element.classList
に関数を付与することによってクラスを扱うことが可能となっております。
add(); remove();
classListを通して要素が属するクラスを変更。
これらは、classListにトークン（文字列）を追加、または削除を行います。
例：
classを追加
element.classList.add('foo');
classを削除
element.classList.remove('foo');
対象の要素に追加を行いたいclassがすでにある場合は追加を行わず、
削除をする場合もすでにない場合でも問題なく処理を行ってくれます。
toggle();
超便利なのが、toggleです。
これは、指定したクラスの有無の切り替えを行ってくれる関数です。
詳しく説明すると、既にそのクラスがある場合は削除、クラスが存在しない場合は追加します。
例：
classを追加&削除（切り替え）
element.classList.toggle('foo');
contains();
さらに、クラスが含まれているかどうかを判定するのが、containsとなります。
.mach(/hoge/);とか正規表現を用いること無く、クラス判定を行うことが出来ます。
例：
classを判定
element.classList.contains('foo');
詳しいことは以下のページに記述されていますので宜しければぁ。
