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

dataset プロパティ

HTMLElement.dataset

　dataset プロパティは HTMLElement のプロパティで、HTMLエレメントの 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 で予めにスクリプトで使うデータを設定しておくことができます。data-* 属性のデータの取得をこの dataset プロパティで行うことができます。

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

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

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

　data-* 属性における * を以下の制約に従った名称で作成します。

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

dataset プロパティ による取得と設定

　JavaScript で data-* 属性を取得するには dataset プロパティを使用します。

data-* 属性の取得
<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-* 属性をオブジェクトとして取得します。

　data-* 属性は複数の同じようなデータを扱うことが想定されますので querySelectorAll メソッドを使用した方がよいかもしれません。

data-* 属性の取得
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 にエントリーされると、dataset プロパティの名称はダッシュスタイルからキャメルケースに替えられます。以下のルールがあります。

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

　他にも data-* 属性を操作するには、値の取得には getAttribute メソッド、値の設定には setAttribute メソッドを使う方法があります。
　値はすべて文字列として扱われます。

getAttribute メソッドを使った dataset プロパティの値の取得です。

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

　setAttribute を使った値を設定するには以下のようにします。

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

Example

　dataset プロパティの使用例です。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

関連（Related）