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

仕様

ブラウザ実装状況

関連情報

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