HTMLOrForeignElement.dataset

dataset は HTMLOrForeignElement インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。このアクセスは、 HTML と DOM の両方の中で利用できます。これは DOMString のマップ (DOMStringMap) で、1つのカスタムデータ属性が1つのエントリに対応します。なお、 dataset プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは dataset 内の個々のプロパティに対して行われる必要があり、それはデータ属性を表します。また、 HTML の data-属性とそれに対応する DOM dataset.プロパティ　は同じ名前を共有しませんが、次のように常に近いものになります。

HTML のカスタムデータ属性の名前は、 data- で始まります。文字、数字、およびダッシュ (-)、ドット (.)、コロン (:)、アンダースコア (_) のみを含める必要がありますが、 ASCII 大文字の A から Z は使用できません。
JavaScript のカスタムデータ属性の名前は、同じ HTML 属性の名前ですが、キャメルケース (camelCase) であり、ダッシュ、ドットなどは含みません。

以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。

名前変換

ダッシュスタイルからキャメルケースへ: カスタムデータ属性名は、次のルールに従って DOMStringMap エントリのキーに変換されます。

プレフィックスの data- が (ダッシュを含め) 削除されます。
ダッシュ (U+002D) に ASCII 小文字の a から z が続く場合、ダッシュは削除され、文字は対応する大文字に変換されます。
他の文字 (他のダッシュを含む) は変更されません。

キャメルケースからダッシュスタイルへ: キーを属性名にマッピングする逆の変換では、次のルールが使用されます。

制約事項: ダッシュの直後に ASCII 小文字 a から z を続けてはなりません (変換前)。
接頭辞として data- が追加されます。
ASCII 大文字の A から Z は、ダッシュと、その後に対応する小文字が続くものに変換されます。
他の文字は変更されません。

上記の規則の制約事項により、2つの変換が互いに逆変換になります。

例えば、data-abc-def という名前の属性は、キー abcDef に対応します。

値へのアクセス

属性は dataset のオブジェクトプロパティのようにキャメルケース名 (キー) を使用して、 element.dataset.keyname のように設定したり読み取ったりすることができます。
属性はブラケット構文を使用して、 element.dataset[keyname] のように設定したり読み取ったりすることもできます。
in 演算子を使用して、特定の属性が存在するかどうかを確認できます。

値の設定

属性が設定されると、その値は常に文字列に変換されます。例えば、null は文字列 "null" に変換されます。
属性を削除する場合は、delete 演算子を使用できます。

構文

const dataAttrMap = element.dataset

値

DOMStringMap です。

例

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// データ属性の設定
el.dataset.dateOfBirth = '1960-10-03';
// 結果: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// 結果: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 結果: 'someDataAttr' in el.dataset === true

仕様書

仕様書	状態	備考
HTML Living Standard HTMLElement.dataset の定義	現行の標準	最新のスナップショットである HTML 5.1 から変更なし
HTML 5.1 HTMLElement.dataset の定義	勧告	HTML Living Standard のスナップショット、 HTML5 からの変更なし
HTML5 HTMLElement.dataset の定義	勧告	HTML Living Standard のスナップショット、初回定義

ブラウザーの互換性

BCD tables only load in the browser