HTML5で追加されるclassList APIについてのメモ

一部嘘を付いていたので修正しました。has ⇛ contains
WHATWGのリンク先も修正しました。ありがとうございます＞＜

簡単に調べたメモ。特に進展はないよ。

早い話jQueryのaddClassやremoveClass、hasClassっていうメソッドをネイティブに実装するからみんな楽朕っていうやつです。

• WHATWG – HTML5 – 2.8.3 DOMTokenList（リンク先修正しました
• HTML5 classList API
• classList (DOMTokenList) の実装状況

何が出来るの

var div = document.getElementById("unk0");

div.classList.add("kusai"); // classにkusaiを追加
div.classList.remove("kusai"); // classからkusaiを削除

div.classList.toggle("kusai"); // kusaiを付けたり取ったり

if ( div.classList.contains("kusai") ) { // classにkusaiがあればtrue、逆はfalse
  // くさければ
} else {
  // くさくなければ
}

今まではめんどくさいけど、一旦取得して正規表現で判定してとか、replaceで削除してとかそういった手間が一切なくなるっていうやつです。

実装状況

IE9はちょっと手元になかったので見れてないですけど

• Firefox3.6以降
• Chrome10.0.648.126 (Win
• Chrome9.0.597.107（Mac

で使えるっぽいです。つまりまだちょっと早い。Mobile Safari（iOS4.2）も当然まだ使えないです。

一応作ったサンプル置いときます
使えるブラウザは上のやつです。なんかどれくらい差があるんやろー思ってそういう感じにしたんですけど、よくわからんすね

classListとjQueryのメソッドの比較

jQueryだと実装されてるので、まあそういう感じだということで把握しました。もちろんjQueryはネイティブで本来やる流れを吸収してくれてるので、classListのほうが早いよね、便利やでっていうことです。

あと大きな違いは、classListはひとつのDOMにしか使えないのに対してjQueryのメソッド（hasClass除く）は複数のjQueryオブジェクトに使えるっていうことですね。吸収してくれる

classList

var div = document.getElementById("unk0");

div.classList.add("kusai"); // classにkusaiを追加
div.classList.remove("kusai"); // classからkusaiを削除

div.classList.toggle("kusai"); // kusaiを付けたり取ったり

if ( div.classList.contains("kusai") ) { // classにkusaiがあればtrue、逆はfalse
  // くさければ
} else {
  // くさくなければ
}

jQuery

var div = $("#unk0");

div.addClass("kusai"); // classにkusaiを追加
div.removeClass("kusai"); // classからkusaiを削除

div.toggleClass("kusai"); // kusaiを付けたり取ったり

if ( div.hasClass("kusai") ) { // classにkusaiがあればtrue、逆はfalse
  // くさければ
} else {
  // くさくなければ
}