備忘録的プログラミングリファレンス

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-*属性の値の取得です。

tokyo_obj.setAttribute("data-type", "big city");

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");		// 値の設定