dataset か？ setAttribute / getAttribute か？

Question

JavaScript初学者です。

HTMLデータ属性の取得にあたって、タイトルのようにdatasetとsetAttribute / getAttributeという2通りがあることを知り困惑しています。

次のリンクによれば速度面での性能はsetAttribute / getAttributeの方が良いようです。
https://jpdebug.com/p/1148429

ならばそちらを使おうと現状は安易に考えていますが、その前にteratailの皆様はどのような理由でどちらをお使いかお聞かせ頂きたく思いました。

また、もし詳しい方がいらっしゃいましたら、なぜ２つの方法が存在するのか、その経緯や、他言語との兼ね合いや、実は使いどころが異なる、ナドナド...も含めてお聞かせ頂けましたら幸いです。

宜しくお願い致します。

Answer 1

ドット表記のプロパティアクセサが使える、代入式で変更できる、などの可読性の観点から、datasetの方が好みです。

---

なお、当方の環境で試したところ、Chromeではおそらく1割ほどsetAttributeの方が速いようですが、Firefoxではdatasetの方が倍ぐらい速いです。Webkit系はたぶん、Chromeと似たようなことになるのではないかな、という気がします。
共通して言えることは、１～20000よりも、20000~40000の方が数倍遅くなりますので、大量の属性をつけることを想定していないのだろうということです。

つまりは、処理速度差が目に見えて表れるような実装をすべきではない、ということかと思います。

また、ご提示のテストは書き込み速度だけですので、参照速度が同様である保証はないかと思います（特に大量の属性がついている場合は）。

Comments

[nikuatsu]

ありがとうございます。さりげなく使われている用語が大変勉強になりました。
そしてブラウザによっても速度って変わるとは！？まったく知りませんでした。今後気を付けます。

Answer 2

勝手に属性をつけることはバグの温床になるためおすすめできません
ご自身でジャッジできないならカスタムデータの利用をおすすめします

Comments

[nikuatsu]

ありがとうございます。

「勝手に属性をつける」とは、.dataset か xxxAttribute か、どちらの操作を指していますか？

あと「カスタムデータの利用」というのはHTMLのデータ属性と同義ですよね？.dataset か xxxAttribute もどちらも同じだと思うのですが、おすすめの意図が掴めませんでした。

（ちなみに私は高評価しています…）

[yambejp]

> どちらも同じ

失礼しました。「データ属性の取得」という前提でしたね。
ちょっと誤読していたようです。

個人的にはdatasetの方がアクセスしやすいと理解しています

[nikuatsu]

なるほどアクセスのしやすさ、ですか。皆さんそれぞれのお考えが参考になります。ありがとうございます。

Answer 3

余程大量データを一気に取得しない限りはどちらでも大したことはないですが、datasetのほうが制約が多いイメージです。
JavaScriptでdata属性を扱う

また、画面表示時から属性値が変更される場合、直接属性値を参照できるgetAttribute()でないと取得できないようです。
変更されないのであればどちらでも良いでしょうけど、実装を統一したほうが良いです。

Comments

[nikuatsu]

ありがとうございます。なるほど、getAttributeは直接参照ができるのは利点ですね。とりあえず統一には気を付けます。