HTML要素.dataset

// data属性の値を取得する
var value = element.dataset.キー名;

// data属性の値を設定する
element.dataset.キー名 = "値";

// data属性を削除する
delete element.dataset.キー名;

<div id="user" data-name="user1" data-age="37" data-is-active="true">ユーザー情報</div>
<ul id="member-list">
	<li data-member-id="1" data-org="org_a">user1</li>
	<li data-member-id="2" data-org="org_b">user2</li>
	<li data-member-id="3" data-org="org_c">user3</li>
	<li data-member-id="4" data-org="org_d">user4</li>
</ul>
<button id="toggle-btn" data-state="off">切り替え</button>

同じ処理は次のようにも書けます。

// パターン1: data属性の取得・設定・削除
var user = document.getElementById("user");
console.log(user.dataset.name);
console.log(user.dataset.age); // 『37』と出力されます。（文字列です）
console.log(user.dataset.isActive);

user.dataset.role = "manager"; // data-role 属性が追加される
delete user.dataset.age; // data-age 属性が削除される

// パターン2: 数値・真偽値に変換して使う
var age = Number(user.dataset.age); // 削除前の値を想定：文字列から数値に変換する
console.log(user.dataset.isActive === true); // 『false』（文字列 "true" は true ではない）
console.log(user.dataset.isActive === "true");

// パターン3: data属性を使ったリストのフィルタリング
var items = document.querySelectorAll("#member-list li");
items.forEach(function(item) {
	if (item.dataset.org === "org_a" || item.dataset.org === "org_b") {
		item.style.fontWeight = "bold"; // 該当する組のメンバーを太字にする
	}
});

// パターン4: data属性でトグル状態を管理する
var toggleBtn = document.getElementById("toggle-btn");
toggleBtn.addEventListener("click", function() {
	if (toggleBtn.dataset.state === "off") {
		toggleBtn.dataset.state = "on";
		toggleBtn.textContent = "ON";
	} else {
		toggleBtn.dataset.state = "off";
		toggleBtn.textContent = "切り替え";
	}
	console.log("現在の状態: " + toggleBtn.dataset.state);
});

サンプルページはこちら

ミス1: datasetの値は常に文字列

『HTML要素.dataset』で取得した値は常に文字列のため、数値と直接比較すると意図しない結果になります。数値として扱いたい場合は『Number()』や『parseInt()』で変換します。

var el = document.getElementById("user");
// NG: datasetの値は文字列なので、数値との比較は常にfalseになる
if (el.dataset.age > 30) {
	console.log("30歳以上");
}
// "37" > 30 は文字列比較になり正しく動作しない場合がある

修正後は次の通りです。

var el = document.getElementById("user");
// OK: Number()で数値に変換してから比較する
if (Number(el.dataset.age) > 30) {
	console.log("30歳以上");
}

ミス2: data-属性名のキャメルケース変換を知らない

『data-』以降がハイフン区切りの属性名は、『dataset』経由でアクセスする際にキャメルケースに変換されます。ハイフンのままアクセスすると『undefined』になるため、『data-user-id』は『dataset.userId』として参照します。

// NG: data-user-id はキャメルケースに変換してアクセスする必要がある
var id = el.dataset["user-id"]; // undefined

修正後は次の通りです。

// OK: data-user-id は dataset.userId でアクセスする
var id = el.dataset.userId; // 正しく取得できる

『HTML要素.dataset』はHTML要素に設定されたカスタムデータ属性（data-*属性）にアクセスするためのプロパティです。HTMLの属性名から『data-』を除いた部分がキー名になり、ハイフン区切りの場合はキャメルケースに変換してアクセスします。例えば『data-user-id』は『dataset.userId』で取得・設定できます。

『HTML要素.dataset』で取得される値は常に文字列です。数値として使いたい場合は『Number()』や『parseInt()』で変換する必要があります。真偽値として使いたい場合も文字列の『"true"』『"false"』として返されるため、『=== true』のような厳密比較は成立しません。

data属性はHTMLの仕様で認められた正式なデータ埋め込みの方法です。『HTML要素.getAttribute()』でも取得可能ですが、『HTML要素.dataset』の方がオブジェクトのプロパティとして直感的にアクセスでき、読み書きも簡潔に記述できます。