data-* 属性
data-* 属性は、HTMLエレメントのグローバル属性で、カスタムデータを任意に作成するための属性です。
<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 );
任意のデータを、HTMLとスクリプトの間で共有することができます。
スクリプトで使うデータを予め HTML テキストで設定しておくことができます。スクリプトでのデータの取得は HTMLElement.dataset プロパティを通して行います。
data-* 属性の名称
HTML での data-* 属性は他のHTML属性と同じように設定するのですが、* の部分が任意の名称になります。
<li id="tokyo" data-type="city" data-population="13951636" data-population-density="6359"> Tokyo </li>
data-* 属性には、* を以下の制約に従った名称で作成します。
- XML名の作成規則に従う
- 大文字のAからZまでの文字を含めない
- xmlで始めない
- ;（セミコロン）を含めない
スクリプトと data-* 属性
JavaScript で data-* 属性を取得するには dataset プロパティを使用します。
<li id="tokyo" data-type="city" data-population="13951636" data-population-density="6359"> Tokyo </li> let city_dates = document.querySelector("[data-type='city']"); console.log( city_dates.dataset );
上記の例では data-* 属性をオブジェクトとして取得します。
data-* 属性は複数の同じようなデータを扱うことが想定されますので querySelectorAll メソッドを使用した方がよいかもしれません。
let city_dates = document.querySelectorAll("[data-type='city']");
console.log( city_dates[0].dataset );
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.querySelectorAll("[data-type='city']");
alert( city_obj[0].dataset.populationDensity );
ダッシュスタイルからキャメルケース
DOMStringMap にエントリーされると、data-* 属性の名称はダッシュスタイルからキャメルケースに替えられます。以下のルールがあります。
- プレフィックス data-* を削除
- -（ダッシュ）に ASCII 文字のaからzが続く場合、ダッシュを削除し、小文字を対応する大文字に変換
- 他の文字は変更しない
data-abc-def-ghi <---> abcDefGhi
他にも値の取得には getAttribute メソッド、値の設定には setAttribute メソッドを使う方法があります。
値はすべて文字列として扱われます。
getAttribute メソッドを使った data-* 属性の値の取得です。
let tokyo_obj = document.getElementById("tokyo");
var city_type = tokyo_obj.getAttribute("data-type");
setAttribute を使った値を設定するには以下のようにします。
tokyo_obj.setAttribute("data-type", "big city");
Example
dataset プロパティの使用例です。