data属性 = カスタムデータ属性
これをJavaScriptで取得・追加したい場合です。
それには専用の方法が用意されてます。
知らないと遠回りなことをしがちなので、
JSでデータ属性を取得・追加の方法をまとめます。
このページの目次
data属性とはそもそも何か。その定義
これはカスタムデータ属性とも呼ばれます。
▼ このような特徴を持つ
- 属性名が data- から始まる
- HTML ⇔ JS 間のデータ受け渡しに使う
- 他属性と衝突しないカスタムデータ
▼ data属性を持つ要素のHTML例
|
1 2 3 4 5 6 7 8 |
<div class="hoge" data-id="263" data-category-id="8" data-category-name="Food" data-name="Yummy Cookie" data-created-at="2023-03-21"> ... </div> |
このように data-id とか data-category みたいに data- から始まる属性です。data属性名は大文字ふくめずハイフンで区切るように定義します。
用途としては表面的には表示したくないもの（IDだったり、作成日時だったり）を保持したり、JavaScriptにカスタムデータを渡すのに使います。
data属性自体はとてもシンプル。
data属性はdatasetから簡単に扱える
このdata属性をどうやって扱うかですが…
実は専用のdatasetプロパティが用意されてます。
▼ HTMLElement.dataset の概要
dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (DOMStringMap) で、それぞれの data-* 属性の項目です。
引用元 ： https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset
こんな便利なのがあると知らなかった…
知らないから遠回りな方法を使ってました。
同じような経験した人は少なくないはずです。
要素のdata属性を取得する方法とコード例
それではdatasetによるdata属性の取得について。
これは本当に簡単にできます。
▼ 例えばこんな要素があるとする
|
1 2 3 4 5 6 7 8 |
<div id="item-263" data-id="263" data-category-id="8" data-category-name="Food" data-name="Yummy Cookie" data-created-at="2023-03-21"> ... </div> |
▼ datasetからdata属性取得のJSコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/// 対象のHTMLElement const $item = document.getElementById('item-263'); /// data-id属性値を取得 const id = $item.dataset.id; /// data-category-id属性値を取得 const categoryId = $item.dataset.categoryId; /// data-category-name属性値を取得 const categoryName = $item.dataset.categoryName; /// 取得できているか確認 console.log('id : ', id); console.log('category id : ', categoryId); console.log('category name : ', categoryName); /// まとめてdata属性値を取得するのも可能 Object.keys($item.dataset).forEach((key, i)=>{ const value = $item.dataset[key]; console.log(`[data-${key}="${value}"]`); }); |
▼ 上記コードのコンソール出力結果
|
1 2 3 4 5 6 7 8 9 |
id : 263 category id : 8 category name : Food [data-id="263"] [data-categoryId="8"] [data-categoryName="Food"] [data-name="Yummy Cookie"] [data-createdAt="2023-03-21"] |
上記コードの $item.dataset.categoryId みたいにカスタム属性の名前でアクセスできます。ただしHTML上ではハイフン区切りの data-category-name ですが、JavaScript上では dataset.categoryName のようにキャメルケース記法になります。
- HTML上ではdata属性はハイフン区切り
- JS上ではそれにキャメルケースでアクセス
この点に注意が必要になります。
要素にdata属性を追加・書き換えのコード例
お次はdata属性を追加・書き換えする場合です。
そういった場合、次のようなコードになります。
▼要素に data-deleted-at 属性を追加するコード例
|
1 2 3 4 5 |
/// 対象のHTMLElement //const $item = document.getElementById('item-263'); /// 新たにdata-deleted-at属性を追加 $item.dataset.deletedAt = '2023-12-31'; |
▼ 要素の data-created-at 属性を書き換えするコード例
|
1 2 3 4 5 |
/// 対象のHTMLElement //const $item = document.getElementById('item-263'); /// 既存のdata-created-at属性を書き換え $item.dataset.createdAt = '2023-03-20'; |
そのまんまdata属性に代入するだけです。
ただしJavaScript上ではハイフン区切りのケバブケース記法ではなく、大文字区切りのキャメルケース記法になるのに注意です。
追加・書き換えはこんなところ
特定のdata属性を持つ要素を取得するには？
ここは本筋からは少し離れます。
以下をJavaScriptでコード的にしたいことが…
- 特定のdata属性を持つ要素を取得したい
- 例えば data-id = 263 の要素を取得とか
それにはセレクタを使って要素取得が可能です。
▼ あるdata属性値を持つ要素取得のコード例
|
1 2 3 4 5 6 7 |
/// 取得したいdata-id属性の値 const itemId = 236; /// 要素を取得 const $item = document.querySelector( `[data-id="${itemId}"]` ); |
このような感じで document.querySelector() に対して [data属性名="data属性値"] のようなセレクタを渡せばOK。こういった記述はdata属性に限った話ではないです。
ちなみに変数展開にテンプレート文字列も使ってます。
▼ 上記コードでも使ってるテンプレ文字列について
変数展開とか複数行文字列に役立つ記法です。
とりあえずdata属性 ⇒ 要素取得はこういう感じ
遠回りな方法をやめてdatasetを使っていきたい
以前は遠回りな方法でdata属性を扱ってました。
これからはdatasetを積極的に使っていきたいです。
以上、JSでのdata属性の取得・追加でした。ではまた
