せかいろぐ

ほぼ自分用備忘録

HTML5の独自データ属性にアクセスする

HTML5の独自データ属性にアクセスする話。

<p id="test" data-test="now testing">test<p>


こんなタグがあったとき、JavaScriptからdata-testにアクセスするには、

document.getElementById("test").dataset.test;


かなー、と思いきや、IEでは

>> typeof document.getElementById("test").dataset 
   "undefined"


なのでした。IEにも対応しうるコードにするなら、

document.getElementById("test").getAttribute("data-test");


とすべき。*1
ちなみにjQueryを用いるなら、

$("#test").data("test");


ラクですね。
ちなみに、これらの方法でアクセスするときの速度を測ってみると、

getAttribte >> dataset >>>>>>>>>> jQuery.data


となりました。数ミリ秒の世界だけどね。

jQueryに頼ると遅いのは仕方ないとして、getAttribteは早い上に多くのブラウザに対応できるので、これを使うのが一番いいのかな?

*1:IE11からはdatasetも使えるみたいです