DOM

：

：

HTMLElement.dataset プロパティ

　編集：2022.09.29 by T.A.

[Edge]。読取専用。→

element に設定されたカスタム データ属性（data-＊）への読み取り／書き込みする為の DOMStringMap を示します。

Note： dataset プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは dataset 内の個々のプロパティに対して行う必要があり、それは data 属性を表します¶。

構文
element.dataset
element HTMLElement オブジェクト。
値

DOMStringMap オブジェクト。

data-＊属性のアクセス
HTML では
属性の名前は、data- で始まります。以降は、文字、数字、ダッシュ「-」、ドット「.」、コロン「:」、アンダースコア「_」のみを入れることができます。 ASCII 大文字の A から Z は小文字に変換されます。
JavaScript では
カスタム データ属性のプロパティ名は、同じ HTML 属性の名前から data- の接頭辞を除いたものですが、そのプロパティのキャメルケース（camelCase）の名前であり、単一のダッシュ「-」を除いたものです。
キャメルケース

→

ダッシュス タイルからキャメルケースへの変換

カスタム データ属性名は、次のルールに従って DOMStringMap 項目のキーに変換されます。

  1. すべての ASCII の大文字（A～Z）を小文字にします。
  2. 接頭辞の「data-」を（ダッシュを含め）削除します。
  3. ダッシュ「-」（U+002D）に ASCII 小文字の a～z が続く場合、ダッシュを削除し、その文字を対応する大文字に変換します。
  4. 他の文字（他のダッシュを含む）は変更しません。
例
mdnより

HTML： 

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>
John Doe</div>

JavaScript： 

const el = document.querySelector('#user');

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// データ属性の設定
el.dataset.dateOfBirth = '1960-10-03';
// 結果: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// 結果: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 結果: 'someDataAttr' in el.dataset === true
簡単な、

HTML： 

<DIV class="Test"
 data-id="1234567890"
 data-user="johndoe"
 data-date-of-birth
>
John Doe</DIV>

JavaScript： 

EC=document.getElementsByClassName("Test"); //class名「Test」の要素コレクションを得る。
	//＝[object]：[object HTMLCollection]
	//0＝[object]：[object HTMLDivElement]
	//length＝[number]：1
	//item＝[function]：function item() { [native code] }
	//namedItem＝[function]：function namedItem() { [native code] }
D=EC[0].dataset; //＝[object]：[object DOMStringMap]
	//id＝[string]：1234567890
	//user＝[string]：johndoe
	//dateOfBirth＝[string]：
EC[0].dataset.dateOfBirth=true; //真偽値で値を設定してみる。
D=EC[0].dataset.dateOfBirth; //＝[string]：true。文字列となった。
D=EC[0].dataset['dateOfBirth']; //＝[string]：true。ブラケット記法でアクセス。

→document.getElementsByClassName()。

テスト