dataset

データセット（DOM操作）

意味 data属性へのアクセス

datasetとは？

datasetプロパティは、要素のdata-*属性にアクセスするためのオブジェクトです。

datasetの具体的な使い方

datasetを使用してdata-*属性にアクセスする例

<div id="user" data-user-id="1234" data-user-name="山田太郎" data-age="30"></div>

<script>
const user = document.getElementById('user');

// data-*属性の値を取得
console.log('User ID:', user.dataset.userId);
console.log('User Name:', user.dataset.userName);
console.log('Age:', user.dataset.age);

// data-*属性の値を設定
user.dataset.role = '管理者';
console.log('Role:', user.dataset.role);

// data-*属性の値を削除
delete user.dataset.age;
console.log('Age after deletion:', user.dataset.age);
</script>

👇出力結果

User ID: 1234
User Name: 山田太郎
Age: 30
Role: 管理者
Age after deletion: undefined

HTML要素のdata-*属性にJavaScriptからアクセスし、値の取得、設定、削除を行います。datasetを使用することで、キャメルケースで簡単にdata属性を操作できます。

datasetに関するよくある質問

Q. datasetの命名規則は？

A. HTML上では'data-'で始まるケバブケース（例：data-user-id）を使用し、JavaScriptでアクセスする際はキャメルケース（例：dataset.userId）に変換されます。

Q. datasetで値を設定できる？

A. はい、dataset経由で値を設定することも可能です。例えば、element.dataset.userId = '67890'とすることで、HTML要素の'data-user-id'属性の値を更新できます。

Q. datasetの値の型は？

A. datasetから取得される値は常に文字列型です。数値や真偽値として使用する場合は、適切に型変換する必要があります。

Q. 存在しない属性にアクセスすると？

A. 存在しないdata属性にdataset経由でアクセスしても、エラーは発生しません。代わりにundefinedが返されます。

datasetが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのdatasetやgetElementsByTagName()、classList、HTMLCollection、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。