気が付いたらJSスクラッチ界隈が便利になってた件1

1.気が付いたらJSスクラッチ界隈が便利になってた件1
2.気が付いたらJSスクラッチ界隈が便利になってた件2
3.[気が付いたらJSスクラッチ界隈が便利になってた件3]
(http://qiita.com/Bong/items/bd434fd7209b9a457139)
4.気が付いたらJSスクラッチ界隈が便利になってた件4

#クラスの操作が便利になっていた
今までCSSのクラスを操作する場合は、
追加や削除が何かと面倒でした。

##クラスの追加
例えば「ある要素にクラスを追加する」必要があった場合、
クラス名を文字列として連結していました。

var elm = document.getElementById("animal01");
elm.className = "red";
elm.className += " bold";
elm.className += " italic";

これが、HTML5からはaddするだけ。

var elm = document.getElementById("animal01");
elm.classList.add("red");
elm.classList.add("bold");
elm.classList.add("italic");

シンプル！

##クラスの削除
削除も同様に、面倒くさい処理だったのが

var elm = document.getElementById("animal01");
elm.className = elm.className
  .split(" ")
  .filter(function(c){return c != "bold";})
  .join(" ");

これでOK。

var elm = document.getElementById("animal01");
elm.classList.remove("bold");

##まとめ
今回、HTML5の変更点を改めて調べてみたのですが、細かい部分でいろいろと便利になっていることが判明しました。

デザイン界隈ですと、Photoshopで新バージョンが出る毎に「ベテランほど知らない新機能！」的な記事を見かけます。

もちろんそれは、エンジニアにも当てはまりそうですね。