Dataset
dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (DOMStringMap) で、それぞれの data-* 属性の項目です。
また、 HTML の data-* 属性とそれに対応する DOM の dataset.プロパティ は同じ名前にはなりませんが、次のように常に近いものになります。
HTML では
属性の名前は、 data- で始まります。文字、数字、ダッシュ (-)、ドット (.)、コロン (:)、アンダースコア (_) のみを入れることができます。ASCII 大文字の A から Z は小文字に変換されます。
JavaScript では
カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から data- の接頭辞を除いたものですが、そのプロパティのキャメルケースの名前であり、単一のダッシュ (-) を除いたものです。
以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 7 | 12 | 6 | 5.1 | 18 | 5 | |
| DOMStringMap インターフェイスは、要素に追加されたカスタム属性のデータを表すために HTMLElement.dataset/SVGElement.dataset 属性で使用されます。 | 7 | 12 | 6 | 5.1 | 18 | 5 |
| MathMLElement インターフェースの dataset read-only プロパティは、要素上のカスタムデータ属性 (data-) への読み書きアクセスを提供する。これは、各 data- 属性のエントリを持つ文字列のマップ（DOMStringMap）を公開します。 | 109 | 109 | 71 | 13.1 | 109 | 13.4 |
| dataset は SVGElement インターフェイスの読み取り専用プロパティで、要素のカスタムデータ属性 (data-) への読み書きアクセスを提供します。これは文字列のマップ (DOMStringMap) を公開し、各 data- 属性の項目を持つ文字列の地図（DOMStringMap）を公開します。 | 55 | 17 | 51 | 5.1 | 55 | 5 |
基本構文
const el = document.querySelector("#user");
// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'carinaanand'
// el.dataset.dateOfBirth === ''
// set a data attribute
el.dataset.dateOfBirth = "1960-10-03";
// Result on JS: el.dataset.dateOfBirth === '1960-10-03'
// Result on HTML: <div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth="1960-10-03">Carina Anand</div>
delete el.dataset.dateOfBirth;
// Result on JS: el.dataset.dateOfBirth === undefined
// Result on HTML: <div id="user" data-id="1234567890" data-user="carinaanand">Carina Anand</div>
if (el.dataset.someDataAttr === undefined) {
el.dataset.someDataAttr = "mydata";
// Result on JS: 'someDataAttr' in el.dataset === true
// Result on HTML: <div id="user" data-id="1234567890" data-user="carinaanand" data-some-data-attr="mydata">Carina Anand</div>
}実務での使いどころ
-
Dataset の活用
dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。