MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

HTMLElement.dataset

HTMLElement.dataset は、カスタムdata属性 (data-*)のセットされたすべての要素に対して、読み取り専用のプロパティを提供するためのものです。カスタムdata属性に関するこちらのDOMStringマップの記事も参考にしてください。

カスタムdata属性の名前はdata-で始まる。また、カスタムdata属性名は文字、数字とダッシュ(-)、ドット (.)、コロン (:)、アンダースコア (_)しか含むことができない。さらに、ASCIIコードの大文字AからZも含むことができない。

カスタムdata属性名は下記の制限事項に従って DOMStringMapのキーに変換される。

  • 接頭辞data-が取り除かれる(ダッシュを含む)
  • ASCIIコードの小文字aからzに続くいかなるダッシュ (U+002D)は、変換の際に取り除かれ、続く小文字は大文字に変換される
  • 他の文字(他のダッシュも含む)はそのまま変換される

反対方向の変換、すなわち DOMStringMapのキーからカスタムdata属性名への変換は、以下の制限事項に従う。

  • 制限事項:ダッシュは変更前にASCIIコードの小文字aからzの直後に続いてはならない
  • 接頭辞data-が付与されること
  • any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
  • いかなるASCIIコードの大文字A - Zは変換後、ダッシュに小文字が続く形となる
  • 他の文字は変更されない

上記の制限事項によって二方向の相互変換を可能とする。

例えば、data-abc-defと命名された属性はabcDefというキー名に対応している。

構文

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

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

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

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

el.dataset.dateOfBirth = '1960-10-03'; // 誕生日をセットする

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

仕様

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'HTMLElement.dataset' in that specification.
Living Standard 前回の内容より変更なしHTML5.1
HTML5.1
The definition of 'HTMLElement.dataset' in that specification.
草案 WHATWG HTML Living Standard, HTML5より変更なし
HTML5
The definition of 'HTMLElement.dataset' in that specification.
勧告   WHATWG HTML Living Standard,初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 8 6.0 (6.0) 11 11.10 6
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 6.0 (6) (有) (有) (有)

関連情報

  • HTML data-* クラスのグローバル属性

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

 このページの貢献者: Kenju
 最終更新者: Kenju,