web-dev-qa-db-ja.com

データセットと.data-違い？

データ属性フィールドの値を読んでいます。以下に示すように、データを読み取る2つの簡単な方法を見てきました。

var webappData = document.getElementById('web-app-data'),
    rating = webappData.dataset.rating;

OR

var effectData = $('.effects-list li'),
    creative = effectData.filter('[data-creative]').data("creative");

私の質問は、これらのどれがより良いパフォーマンスを持っているか、本当に違いますか？

アクセスしている多くのデータ属性を含むページがあり、最高のパフォーマンスを持つメソッドを使用したいと思います。

2つの違いを理解するためのガイダンスをいただければ幸いです。パフォーマンスを他の理由よりも使用する他の理由がある場合は特に見ていますが、これについても知りたいです。

javascriptjquerydatasetcustom-data-attribute
31
L84

dataset は、データ属性を含む要素のネイティブプロパティであり、新しい（ish）追加であるため、IE11 +、Chrome 8でのみサポートされます+、FF 6+など.

よりクロスブラウザのソリューションは、属性を直接取得することです

_webappData.getAttribute('data-rating');
_

data() はjQueryメソッドであり、内部に存在しない場合にHTML5データ属性を使用して初期値を設定する以外は、データセットと共通点はありません。

data()は、jQueryによって作成された内部オブジェクトに渡すデータを保存するため、たとえばこれは失敗します

_$(element).data('key', 'value');

element.dataset.key // undefined
_

データは属性に保存されるのではなく、jQueryによって内部的に保存されるためです。
データ属性の取得と設定に相当するjQueryは、attr()です。

_$(element).attr('data-key', 'value');
_

ネイティブメソッドはおそらくより高速ですが、jQueryのdata()と実際には比較できないため、実際には問題ではありませんが、データ属性を取得するには、ブラウザをサポートする最高のメソッドは次のようになります。

_var rating = webappData.getAttribute('data-rating');
_
64
adeneo