HTML要素.dataset

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

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

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

sample_dataset.html

<div id="user" data-name="桐生一馬" data-age="37" data-is-active="true">ユーザー情報</div>
<ul id="member-list">
	<li data-member-id="1" data-org="堂島組">桐生一馬</li>
	<li data-member-id="2" data-org="真島組">真島吾朗</li>
	<li data-member-id="3" data-org="スカイファイナンス">秋山駿</li>
	<li data-member-id="4" data-org="錦山組">錦山彰</li>
</ul>
<button id="toggle-btn" data-state="off">切り替え</button>

sample_dataset.js

// パターン1: data属性の取得・設定・削除
var user = document.getElementById("user");
console.log(user.dataset.name);     // 『桐生一馬』と出力されます。
console.log(user.dataset.age);      // 『37』と出力されます。（文字列です）
console.log(user.dataset.isActive); // ハイフン→キャメルケース。『true』と出力されます。

user.dataset.role = "組長"; // data-role 属性が追加されます。
delete user.dataset.age;     // data-age 属性が削除されます。

// パターン2: 数値・真偽値に変換して使う
var age = Number(user.dataset.age); // 削除前の値を想定：文字列から数値に変換します。
// dataset の値は常に文字列なので、比較前に変換が必要です。
console.log(user.dataset.isActive === true);   // 『false』（文字列 "true" は true ではない）
console.log(user.dataset.isActive === "true"); // 『true』と出力されます。

// パターン3: data属性を使ったリストのフィルタリング
var items = document.querySelectorAll("#member-list li");
items.forEach(function(item) {
	if (item.dataset.org === "堂島組" || item.dataset.org === "真島組") {
		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);
});

サンプルページはこちら

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

『HTML要素.dataset』で取得される値は常に文字列です。数値として使いたい場合は『Number()』や『parseInt()』で変換する必要があります。同様に、真偽値として使いたい場合も文字列の『"true"』『"false"』として返されるため、比較時に注意してください。

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