【JavaScript】data属性の取得・設定・更新【dataset】

Image

JavaScriptでdata属性(カスタムデータ属性)を操作するプロパティのご紹介です。

JavaScriptでは、カスタムデータ属性(data-*)の取得・追加・更新が簡単にできる便利なプロパティが用意されています。datasetというプロパティになります。

getAttributeやsetAttributeを使ってカスタムデータ属性(data-*)の取得や設定は可能ですが、datasetの方がシンプルに記述することができますし、パフォーマンスも高いようです。(比較結果については下記のリンク先をご参照ください。)

dataset vs getAttribute

HTMLにおけるカスタムデータ属性の詳細はにつきましてはこちらをご参照ください。

本記事の内容

  • datasetでdata-*を取得する
  • datasetでdata-*を設定する
  • datasetでdata-*の値を更新する

では、解説していきます。

data-*を取得する

カスタムデータ属性の値を取得する方法です。下記のHTMLからdata-nameの値を取得してみます。

<div id="element" data-name="ryoy"></div>

idで要素を取得して、datasetでdataを指定します。その際に「data-name」から「data-」を除いた属性名「name」を指定します。

let element = document.getElementById('element');
element.dataset.name

もし、カスタムデータ属性名が「data-user-name」のように複数の単語をハイフンで繋いでいる場合は、ハイフンをキャメルケースに置き換えます。

let element = document.getElementById('element');
element.dataset.userName;

data-*を設定する

要素にカスタムデータ属性を設定(追加)する方法です。下記のHTMLに「data-name」というカスタムデータ属性に「ryoy」という値を持たせて追加してみます。

<div id="element"></div>

取得する際と同様に記述して、イコールで値を代入します。

let element = document.getElementById('element');

element.dataset.name = 'ryoy';

もし、「data-user-name」のように複数の単語をハイフンで記述している場合は、キャメルケースに置き換えます。

let element = document.getElementById('element');
element.dataset.userName = 'ryoy';

data-*の値を更新する

要素のカスタムデータ属性の値を更新する方法です。下記のHTMLの「data-name」が持っている値「ryoy」を「ryoyryoy」に更新してみます。

<div id="element" data-name="ryoy"></div>

設定(追加)する際と同様の記述になります。新しい値を代入することで、カスタムデータ属性の値を更新することができます。

let element = document.getElementById('element');

element.dataset.name = 'ryoyryoy';

もし、「data-user-name」のようにハイフンで記述している場合は、キャメルケースに置き換えて更新する値を代入します。

let element = document.getElementById('element');
element.dataset.userName = 'ryoyryoy';

まとめ

最後に、detasetの使い方をまとめます。

data-*の取得 element.dataset.dataName
data-*の設定 element.dataset.dataName = ‘値’;
data-*の更新 element.dataset.dataName = ‘値’;

datasetは使い方がとてもわかりやすいプロパティになります。ハイフンの場合はキャメルケースに置き換えるという点だけ注意していただければと思います。

もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊です。

以上、data属性の取得・設定・更新する方法のご紹介でした!

SHARE