独自データ属性

3.2.5.9 data-* 属性を使った独自非表示データの組み込み

独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。

HTML ドキュメントHTML 要素のすべての属性は自動的に小文字に変換されますので、ASCII 大文字に関する制約はこのようなドキュメントには影響を及ぼすことはありません。

独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。

これらの属性は、この属性を使うサイトと無関係のソフトウェアによる利用を想定していません。

例えば、音楽に関するサイトなら、各トラックの尺を含んだ独自データ属性を使って、アルバムのトラックを表すリスト項目を注記することができるでしょう。この情報は、このサイトでしか使われることはありませんが、ユーザーはトラックの着でリストを並べ替えたり、特定の尺のトラックをリストから絞り込むことができるでしょう。

<ol>
 <li data-length="2m11s">海のかなたに</li>
 ...
</ol>

しかし、ユーザーがこの音楽サイトと関係がない一般的なソフトウェアを使って、このデータからある特定の尺の曲を探すのは無理でしょう。

なぜなら、この属性は、サイト自身のスクリプトが利用するものであり、公式に利用可能なメタデータ用の標準拡張メカニズムではないからです。

すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。


element . dataset

要素の data-* 属性に対応した DOMStringMap オブジェクトを返します。

ハイフンで結ばれた名前は、キャメルケースに変換されます。例えば、data-foo-bar=""element.dataset.fooBar になります。

dataset IDL 属性は、要素にセットされたすべての data-* 属性に対して便利なアクセサーを提供します。値を取得する際には、dataset IDL 属性は DOMStringMap オブジェクトを返さなければいけません。このオブジェクトは、次のアルゴリズムを使って関連付けられ、その要素にセットされたこれらの属性にアクセスできるようにします:

name-value ペアのリストを取得するアルゴリズム
  1. list を、name-value ペアの空リストとします。
  2. 最初の 5 文字が文字列 "data-" で、かつ、残りの文字(もしあれば)に ASCII 大文字が一つも含まれていないコンテント属性に対して、それら属性を該当の要素の属性リストに列挙するために、name-value ペアを list に追加します。ただし、name は、該当の属性の名前から最初の 5 文字を削除したものにし、value は、該当の属性の値とします。
  3. list の name それぞれに対して、後ろに ASCII 小文字が来る "-" (U+002D) 文字を削除して、その後ろの文字を ASCII 大文字に置き換えます。
  4. list を返します。
nameに特定の値をセットするアルゴリズム
  1. name を、このアルゴリズムに引き渡された名前とします。
  2. value を、このアルゴリズムに引き渡された値とします。
  3. 後ろにASCII 小文字が来る "-" (U+002D) 文字が name に含まれていれば、SyntaxError 例外を投げて、この手順を中止します。
  4. name の中の ASCII 大文字 それぞれに対して、その直前に "-" (U+002D) 文字を挿入し、その文字を ASCII 小文字に置き換えます。
  5. name の先頭に文字列 data- を挿入します。
  6. 名前 name を持つ属性の値として、値 value をセットします。もしすでに該当の属性が存在したなら、前の値は置き換えます。もし setAttribute() が名前 name の属性をセットしたときに例外を投げるようなら、同じ例外を投げなければいけません。
name を削除するアルゴリズム
  1. name を、このアルゴリズムに引き渡された名前とします。
  2. name の中の ASCII 大文字それぞれに対して、その直前に "-" (U+002D) を挿入し、その文字を ASCII 小文字に置き換えます。
  3. name の先頭に文字列 data- を挿入します。
  4. 名前 name を持つ属性があれば、それを削除します。なければ何もしません。

このアルゴリズムは、前述の name-value ペアのリストを取得するアルゴリズムから得られる名前に対してのみ、WebIDL 仕様によって呼び出されます。 [WEBIDL]

常に同じオブジェクトが返されなければいけません。

例えば、ゲームの一部として、もしウェブページが宇宙船を表す要素を必要としているなら、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()">
  発射
 </button>
</div>

ハイフンで結ばれた属性名は、この API では、キャメルケースに変換されますので、注意してください。

ウェブ制作者は、たとえその属性が無視され CSS が無効になってもなお該当のページが利用できるよう、そのような拡張を注意深く設計するべきです。

ユーザーエージェントは、これらの属性や値から実装ビヘイビアを一切引き出してはいけません。仕様上、ユーザーエージェントは、これらの属性が意味のある値を持つと定義してはいけないこととしています。

JavaScript ライブラリーは、独自データ属性をページの一部とみなして使うことができます。多くのウェブ制作者に再利用されるライブラリーの制作者は、クラッシュのリスクを低減させるために、この属性名にライブラリーの名前を入れておくことが推奨されます。同じ理由で、ライブラリー制作者はまた、属性名に採用した名前をカスタマイズできるようにすることが推奨されます。そうすることで、ライブラリー制作者が知らぬところで同じ名前を使ったページがあったとしても、そのライブラリーをそのページで利用することができるようになります。また、同じライブラリーでも異なるバージョンによって互換性がない場合など、異なるバージョンを同時に同じページで利用したい場合などにも有効になります。

例えば、"DoQuery" というライブラリーは、 data-jjo-range という属性名を使うかもしれません。そして、"jJo" というライブラリーは data-jjo-range という属性名を使うとしましょう。jJo ライブラリーは、プレフィックスを変更する API を提供することもできるでしょう(例えば、J.setDataPrefix('j2') を呼び出すと、属性名が data-j2-range に変更されるといった API です)。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes