classList、relListがFirefoxに入った

HTML5で定義されている、classNameやrelを操作するための新しいAPIがFirefoxのナイトリーに入った。

var p = document.createElement("p");

p.classList.add("foo");
console.assert(p.className == "foo");

p.classList.add("bar");
console.assert(p.className = "foo bar");
console.assert(p.classList.item(0) == "foo");
console.assert(p.classList.item(1) == "bar");
console.assert(p.classList.item(2) == null);

p.classList.remove("foo");

console.assert(p.className == "bar");
console.assert(p.classList.contains("bar"));
console.assert(!p.classList.contains("foo"));

p.classList.toggle("fizz");
console.assert(p.className == "bar fizz");
console.assert(p.classList.contains("fizz"));

p.classList.toggle("fizz");
console.assert(!p.classList.contains("fizz"));

このように、classListを使うと、className全体を触らずに簡単に個々の文字列を追加したり削除したり、トグルできる。
classListはHTMLCollectionのように動的な配列風オブジェクトであり、配列のように[]でアクセスすることもできる。

relListもだいたい同じように扱えるが、大文字小文字の扱いなどが微妙に違う。