JavaScriptでdata属性を取得・追加する正しい方法／コード例

data属性 = カスタムデータ属性

これをJavaScriptで取得・追加したい場合です。

それには専用の方法が用意されてます。

知らないと遠回りなことをしがちなので、
JSでデータ属性を取得・追加の方法をまとめます。

このページの目次 [隠す]

data属性とはそもそも何か。その定義
data属性はdatasetから簡単に扱える
要素のdata属性を取得する方法とコード例
要素にdata属性を追加・書き換えのコード例
特定のdata属性を持つ要素を取得するには？
遠回りな方法をやめてdatasetを使っていきたい

data属性とはそもそも何か。その定義

これはカスタムデータ属性とも呼ばれます。

▼ このような特徴を持つ

属性名が data- から始まる
HTML ⇔ JS 間のデータ受け渡しに使う
他属性と衝突しないカスタムデータ

▼ data属性を持つ要素のHTML例

<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>

<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属性の取得について。

これは本当に簡単にできます。

▼ 例えばこんな要素があるとする

<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>

<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コード例

/// 対象の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}"]`);
});

/// 対象の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}"]`);

});

▼ 上記コードのコンソール出力結果

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"]

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 属性を追加するコード例

/// 対象のHTMLElement
//const $item = document.getElementById('item-263');

/// 新たにdata-deleted-at属性を追加
$item.dataset.deletedAt = '2023-12-31';

/// 対象のHTMLElement

//const $item = document.getElementById('item-263');

/// 新たにdata-deleted-at属性を追加

$item.dataset.deletedAt = '2023-12-31';

▼ 要素の data-created-at 属性を書き換えするコード例

/// 対象のHTMLElement
//const $item = document.getElementById('item-263');

/// 既存のdata-created-at属性を書き換え
$item.dataset.createdAt = '2023-03-20';

/// 対象の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属性値を持つ要素取得のコード例

/// 取得したいdata-id属性の値
const itemId = 236;

/// 要素を取得
const $item = document.querySelector(
  `[data-id="${itemId}"]`
);

/// 取得したいdata-id属性の値

const itemId = 236;

/// 要素を取得

const $item = document.querySelector(

`[data-id="${itemId}"]`

);

このような感じで document.querySelector() に対して [data属性名="data属性値"] のようなセレクタを渡せばOK。こういった記述はdata属性に限った話ではないです。

ちなみに変数展開にテンプレート文字列も使ってます。

▼ 上記コードでも使ってるテンプレ文字列について

PisukeCode - Web開発まとめ

JavaScriptで複数行文字列を代入する一番簡単な方法

https://pisuke-code.com/javascrip-template-literals

JavaScriptで複数行文字列を代入する方法は色々ありますよね。調べると+で行を連結するやり方とかやたらトリッキーな手法とかが見つかります。ですが現在はテンプレートリテラルを使えば長い文字列でもスマートに代入したり表示する方法があるので、わざわざ面倒なことをする必要がなくなりました。ここではこのテンプレートリテラルについてまとめてみてみます。テンプレートリテラルって何なの？従来だと文字列を作るにはクォートで文字列を囲っていました。例えばちょうど次のコードみたいに/** シングルクォートで囲む */var messa...

変数展開とか複数行文字列に役立つ記法です。

とりあえずdata属性 ⇒ 要素取得はこういう感じ

遠回りな方法をやめてdatasetを使っていきたい

以前は遠回りな方法でdata属性を扱ってました。

これからはdatasetを積極的に使っていきたいです。

以上、JSでのdata属性の取得・追加でした。ではまた

JavaScriptでdata属性を取得・追加する正しい方法／コード例

data属性とはそもそも何か。その定義

data属性はdatasetから簡単に扱える

要素のdata属性を取得する方法とコード例

要素にdata属性を追加・書き換えのコード例

特定のdata属性を持つ要素を取得するには？

遠回りな方法をやめてdatasetを使っていきたい

関連記事

プロフィール

人気記事

検索してみる