data-*属性

　data-*属性は、HTMLエレメントのグローバル属性で、カスタムデータを構成するための属性です。
　任意のデータを、HTMLとスクリプトの間で共有することができます。HTMLにスクリプトで使うデータを設定しておけるのですが、そのデータの取得はDOMを通して行います。

data-*属性の名称

　data-*属性には、*を以下の制約に従った名称に置き換えます。

• XML名の作成規則に従う
• 大文字のAからZまでの文字を含めない
• xmlで始めない
• ;（セミコロン）を含めない

HTMLエレメントとdata-*属性

　HTMLでのdata-*属性は他のHTML属性と同じように設定するのですが、*の部分が任意の名称になります。

<li id="tokyo" data-type="city" data-population="13951636" data-population-density="6359">
  Tokyo
</li>

スクリプトとdata-*属性

スクリプトからdata-*属性を操作するには、値の取得にはgetAttributeメソッド、値の設定にはsetAttributeメソッドを使います。
　値はすべて文字列として扱われます。

var tokyo_obj = document.getElementById("tokyo");
var city_type = tokyo_obj.getAttribute("data-type");

data-*属性の値の取得です。

HTMLElement.datasetプロパティ

　HTMLElement.datasetプロパティによってもdata-*値の取得/設定を提供します。

　data-*は、DOMStringMapにキーとしてエントリーされます。

　HTMLElement.datasetプロパティを利用してdata-*を操作するためには、"data-"部分を外して*部分の任意の名称をダッシュスタイルからキャメルケースに替える必要があります。

<li id="tokyo" data-type="city" data-population="13951636" data-population-density="6359">
  Tokyo
</li>

var city_obj = document.querySelector('#tokyo');

alert( city_obj.dataset.populationDensity );

ダッシュスタイルからキャメルケース

　DOMStringMapにエントリーされると、data-*属性の名称はダッシュスタイルからキャメルケースに替えられます。以下のルールがあります。

• プレフィックスdata-を削除
• -（ダッシュ）に ASCII文字のaからzが続く場合、ダッシュを削除し、小文字を対応する大文字に変換
• 他の文字は変更しない

data-abc-def-ghi <---> abcDefGhi

jQueryとdata-*属性

　jQueryでのdata-*属性の扱い方です。

var tokyo_obj = $("#tokyo");

var city_type = tokyo_obj.data("data-population-density");	// 値の取得

tokyo_obj.data("data-population-density", "6359");		// 値の設定

　jQueryではキャメルケースでも使えます。

var tokyo_obj = $("#tokyo");

var city_type = tokyo_obj.data("populationDensity");	// 値の取得

tokyo_obj.data("populationDensity", "6359");		// 値の設定