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 の data-* クラスのグローバル属性
• データ属性の使用
• Element.getAttribute() および Element.setAttribute()