3.2.3.8 data-* 属性を使った独自非表示データの組み込み
独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンのの後に少なくとも一文字が続きます。これは XML 互換で、U+0041 から U+005A の範囲にある文字を含みません（LATIN CAPITAL
LETTER A から LATIN CAPITAL LETTER Z）。
HTML ドキュメントの HTML 要素のすべての属性は自動的に小文字に変換されますので、大文字に関する制約はこのようなドキュメントには影響を及ぼすことはありません。
独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。
これらの属性は、この属性を使うサイトと無関係のソフトウェアによる利用を想定していません。
例えば、音楽に関するサイトなら、各トラックの尺を含んだ独自データ属性を使って、アルバムのトラックを表すリスト項目を注記することができるでしょう。この情報は、このサイトでしか使われることはありませんが、ユーザーはトラックの着でリストを並べ替えたり、特定の尺のトラックをリストから絞り込むことができるでしょう。
<ol> <li data-length="2m11s">Beyond The Sea</li> ... </ol>
しかし、ユーザーが一般的なソフトウェアを利用する場合、そのソフトウェアはこのサイトのトラック長データを検索するようには作られていませんので、こういったユーザーにとっては、この例は適切とはいえません。
これは、この属性は、サイト自身のスクリプトが利用するものであり、公式に利用可能なメタデータ用の標準拡張メカニズムではないからです。
すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。
- element .
dataset -
要素の
data-*属性に対応したDOMStringMapオブジェクトを返します。ハイフンで結ばれた名前は、キャメルケースに変換されます。例えば、
data-foo-bar=""はelement.dataset.fooBarになります。
dataset IDL 属性は、要素にセットされたすべての data-* 属性に対して便利なアクセサーを提供します。値を取得する際には、dataset IDL 属性は DOMStringMap オブジェクトを返さなければいけません。このオブジェクトは、次のアルゴリズムを使って関連付けられ、その要素にセットされたこれらの属性にアクセスできるようにします。
- name-valueペアのリストを取得するアルゴリズム
-
- list を name-value ペアの空リストとします。
- 最初の 5 文字が文字列 "
data-" であり、残りの文字が（もしあれば）U+0041 から U+005A (LATIN CAPITAL LETTER A から LATIN CAPITAL LETTER Z)までの範囲の文字を一切含んでいない要素上のコンテンツ属性それぞれに対して、その属性名から最初の 5 文字を削除したものを名前とし、その属性値を値とした name-value ペアを list に追加します。 - list の名前それぞれに対して次の変換を行います。U+0061 から U+007A (U+0061 LATIN SMALL LETTER A から U+007A LATIN SMALL LETTER Z)までの範囲の文字の直前にくる U+002D HYPHEN-MINUS 文字 (-) それぞれに対して、U+002D HYPHEN-MINUS 文字 (-) を削除し、その直後の文字を大文字に変換します。
- list を返します。
- name に特定の値をセットするアルゴリズム
-
- name を、このアルゴリズムに引き渡された名前とします。
- value を、このアルゴリズムに引き渡された値とします。
- もし、name が U+002D HYPHEN-MINUS 文字 (-) を含み、その直後に U+0061 から U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z) までの範囲の文字が続くなら、
SYNTAX_ERR例外を投げ、この手順を中止します。 - name の U+0041 から U+005A (U+0041 LATIN CAPITAL LETTER A から U+005A LATIN CAPITAL LETTER Z) までの範囲の文字それぞれに対して、その文字の直前に U+002D HYPHEN-MINUS character (-) を挿入し、その文字を小文字に変換します。
- name の前に文字列
data-を挿入します。 - 名前 name の属性値に値 value をセットします。すでにその属性が存在していれば、以前の値を置き換えます。仮に
setAttribute()を使って名前 name の属性をセットした場合に例外が発生するのであれば、これも同じ例外を発生させなければいけません。
- name を削除するアルゴリズム
-
- name を、このアルゴリズムに引き渡された名前とします。
- name の U+0041 から U+005A (U+0041 LATIN CAPITAL LETTER A から U+005A LATIN CAPITAL LETTER Z) までの範囲の文字それぞれに対して、その文字の直前に U+002D HYPHEN-MINUS character (-) を挿入し、その文字を小文字に変換します。
- name の前に文字列
data-を挿入します。 - 名前 name の属性が存在するなら、それを削除します。それ以外は何もしません。
常に同じオブジェクトが返されなければいけません。
例えば、ゲームの一部として、もしウェブページが宇宙船を表す要素を必要としているなら、data-* 属性とともに、class 属性を使わなければいけないでしょう。
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
<button class="fire"
onclick="spaceships[this.parentNode.dataset.shipId].fire()">
Fire
</button>
</div>
ハイフンで結ばれた属性名は、この API では、キャメルケースに変換されますので、注意してください。
ウェブ制作者は、たとえその属性が無視され CSS が無効になってもなお該当のページが利用できるよう、そのような拡張を注意深くデザインするべきです。
ユーザーエージェントは、これらの属性や値から実装ビヘイビアを一切引き出してはいけません。仕様上、ユーザーエージェントは、これらの属性が意味のある値を持つと定義してはいけないこととしています。
JavaScript ライブラリーは、独自データ属性をページの一部とみなして使うことができます。多くのウェブ制作者に再利用されるライブラリーの制作者は、クラッシュのリスクを低減させるために、この属性名に自分の名前を入れておくことが推奨されます。同じ理由で、ライブラリー制作者はまた、属性名に採用した正確な名前をカスタマイズできるようにすることが推奨されます。そうすることで、ライブラリー制作者が知らぬところで同じ名前を使ったページがあったとしても、そのライブラリーをそのページで利用することができるようになります。また、同じライブラリーでも異なるバージョンによって互換性がない場合など、異なるバージョンを同時に同じページで利用したい場合などにも有効になります。
例えば、"DoQuery" というライブラリーは、 data-doquery-range という属性名を使うでしょう。そして、"jJo" というライブラリーが data-jjo-range という属性名を使うでしょう。jJo ライブラリーは、プレフィックスを変更する API を提供することもできるでしょう（例えば、J.setDataPrefix('j2') を呼び出すと、属性名が data-j2-range に変更されるといった API です）。