dataset
は HTMLOrForeignElement
インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*
) への読み取り/書き込みアクセスを提供します。 このアクセスは、 HTML と DOM の両方の中で利用できます。これは DOMString
のマップ (DOMStringMap
) で、1つのカスタムデータ属性が1つのエントリに対応します。なお、 dataset
プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは dataset
内の個々のプロパティに対して行われる必要があり、それはデータ属性を表します。また、 HTML の data-
属性とそれに対応する DOM dataset.
プロパティ は同じ名前を共有しませんが、次のように常に近いものになります。
- HTML のカスタムデータ属性の名前は、
data-
で始まります。 文字、数字、およびダッシュ (-
)、ドット (.
)、コロン (:
)、アンダースコア (_
) のみを含める必要がありますが、 ASCII 大文字のA
からZ
は使用できません。 - JavaScript のカスタムデータ属性の名前は、同じ HTML 属性の名前ですが、キャメルケース (camelCase) であり、ダッシュ、ドットなどは含みません。
以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。
名前変換
ダッシュスタイルからキャメルケースへ: カスタムデータ属性名は、次のルールに従って DOMStringMap
エントリのキーに変換されます。
- プレフィックスの
data-
が (ダッシュを含め) 削除されます。 - ダッシュ (
U+002D
) に ASCII 小文字のa
からz
が続く場合、ダッシュは削除され、文字は対応する大文字に変換されます。 - 他の文字 (他のダッシュを含む) は変更されません。
キャメルケースからダッシュスタイルへ: キーを属性名にマッピングする逆の変換では、次のルールが使用されます。
- 制約事項: ダッシュの直後に ASCII 小文字
a
からz
を続けてはなりません (変換前)。 - 接頭辞として
data-
が追加されます。 - ASCII 大文字の
A
からZ
は、ダッシュと、その後に対応する小文字が続くものに変換されます。 - 他の文字は変更されません。
上記の規則の制約事項により、2つの変換が互いに逆変換になります。
例えば、data-abc-def
という名前の属性は、キー abcDef
に対応します。
値へのアクセス
- 属性は dataset のオブジェクトプロパティのようにキャメルケース名 (キー) を使用して、
element.dataset.keyname
のように設定したり読み取ったりすることができます。 - 属性はブラケット構文を使用して、
element.dataset[keyname]
のように設定したり読み取ったりすることもできます。 in
演算子を使用して、特定の属性が存在するかどうかを確認できます。
値の設定
- 属性が設定されると、その値は常に文字列に変換されます。 例えば、
null
は文字列 "null" に変換されます。 - 属性を削除する場合は、
delete
演算子を使用できます。
構文
const dataAttrMap = element.dataset
値
DOMStringMap
です。
例
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
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 Living Standard HTMLElement.dataset の定義 |
現行の標準 | 最新のスナップショットである HTML 5.1 から変更なし |
HTML 5.1 HTMLElement.dataset の定義 |
勧告 | HTML Living Standard のスナップショット、 HTML5 からの変更なし |
HTML5 HTMLElement.dataset の定義 |
勧告 | HTML Living Standard のスナップショット、初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML の
data-*
クラスのグローバル属性 - データ属性の使用
Element.getAttribute()
およびElement.setAttribute()