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

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

属性の操作が便利になっていた

確かに前回で終わったはずだった。
ところが急遽、第3弾を書くことに。

属性を取得する

いつものようにattributesを使います。

sample1.html

<a id="human" href="javascript:void(0)" age="30" gender="男">一郎</a>

sample1.js

window.onload = function(){
    var human = document.getElementById("human");
    human.onclick = function(){
        var age = human.attributes["age"].value;
        var gender = human.attributes["gender"].value;
        alert("年齢は" + age + "歳、性別は" + gender);
    };
};

この処理は、getAttributeでも行けます。

sample1.js

window.onload = function(){
    var human = document.getElementById("human");
    human.onclick = function(){
        var age = human.getAttribute("age");
        var gender = human.getAttribute("gender");
        alert("年齢は" + age + "歳、性別は" + gender);
    };
};

ところが

先日、研修生が書いたコードに、「data-○○」という文字を発見。

これはもしかして、JSスクラッチの課題なのに、何かのJSライブラリを使っちゃったかな？
いや、これは違う！

dataset

どうやら、HTML5のカスタム属性は
「data-○○」で定義して、「dataset」で取得するのが作法とのこと！

具体的には、以下の書き方になります。

sample2.html

<a id="human" href="javascript:void(0)" data-age="30" data-gender="男">一郎</a>

sample2.js

window.onload = function(){
    var human = document.getElementById("human");
    human.onclick = function(){
        var age = human.dataset.age;
        var gender = human.dataset.gender;
        alert("年齢は" + age + "歳、性別は" + gender);
    };
};

まとめ

確かに、これは便利ですね～。
今までの方法ですと、うっかり「title」属性にデータを埋め込んで、「マウスオーバーで内容が表示されちゃう」事故が起きますし。
今後はdatasetを、積極的に使っていきたいと思います。

※今回の調査で、新たな学びがありましたので、もう1エントリー書けそうです。
というか、私の勉強不足が露呈しているだけですが (^_^;