このプロパティは、要素上に設定された全てのカスタムdata属性(data-*)の、 読み取りと書き込みの両方のモードでのアクセスを許可します。 これは、各カスタムdata属性にアクセスするための入口となるDOMStringのMapになります。

カスタムデータ属性の名前は、data-から始まります。 これは文字、数字、次の特殊文字(ダッシュ(-)、ドット(.)、コロン(:)、アンダースコア(_))だけを含むことが出来る、 XMLの名前付けのルール(production rule of xml names)に従わなければいけません。 また、ASCIIの大文字(A～Z)を含んではいけません。

カスタムデータ属性の名前は下記のルールに則り、 DOMStringMapへの入り口となるキーに変換されます。

• 接頭辞data-は(ダッシュも含み)削除されます。
• ASCII小文字a～zが後ろに続くダッシュ(U+002D)は、 ダッシュ自体は削除され、その後ろに続く文字が対応する大文字に変換されます。
• その他の文字(その他のダッシュも含む)は、変更されずそのまま残ります。

キーを属性にする逆の変換では、下記のルールが適用されます。

• 制限(変換前): ダッシュのすぐ後ろに、ASCII小文字a～zが続いてはいけません。
• 接頭辞data-が追加されます。
• ASCII大文字A～Zは、ダッシュとその後ろにその小文字が続くものに変換されます。
• 他の文字は、変更されずにそのまま残ります。

上記のルールによる制限は、2つの変換がそれぞれもう1つの変換の裏返しであることを保証してくれます。

例えば、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'; // set the DOB.

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

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

注意事項

 Back to top