Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

1.気が付いたらJSスクラッチ界隈が便利になってた件1
2.気が付いたらJSスクラッチ界隈が便利になってた件2
3.気が付いたらJSスクラッチ界隈が便利になってた件3
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で新バージョンが出る毎に「ベテランほど知らない新機能!」的な記事を見かけます。

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

Bong
エンジニアを支援するサービスが作りたい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away