HTMLElement インターフェイスの dataset プロパティは、要素に設定されたすべてのカスタムデータ属性data-*)への読み取り/書き込みアクセスを提供します。 このアクセスは、HTML と DOM の両方で利用できます。 これは、カスタムデータ属性ごとに1つのエントリである DOMString のマップです。 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 に対応します。

値へのアクセス

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

値の設定

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

構文

  • string = element.dataset.camelCasedName;
  • element.dataset.camelCasedName = string;

  • string = element.dataset[camelCasedName];
  • element.dataset[camelCasedName] = string;

  • カスタムデータ属性を HTML 要素に直接設定することもできますが、属性名は上記の data- 構文を使用する必要があります。

<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 のスナップショット、初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
datasetChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 6IE 完全対応 11Opera 完全対応 11Safari 完全対応 10WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Wind1808, Marco3jp, mdnwebdocs-bot, Kenju
最終更新者: Wind1808,