こんにちは、Ryohei(@ityryohei)です!

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

data属性、正式にはカスタムデータ属性は、HTMLの要素に「data-*」から始まる任意の名前を付けたカスタムデータを持たせることができる属性です。主にスクリプトでデータを扱う場合に指定することが多い属性になります。

スクリプトで扱うことが多いため、JavaScriptにはdata属性の取得・追加・更新といった操作を簡単に実行することができる便利なプロパティが用意されています。「dataset」というプロパティになります。

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

dataset vs getAttribute

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

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

datasetでdata属性(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属性名が「data-user-name」のように複数の単語をハイフンで繋いでいる場合は、ハイフンをキャメルケースに置き換えます。

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

datasetでdata属性(data-*)を設定する

要素にdata属性を設定(追加)する方法です。下記のHTMLに「data-name」というdata属性に「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';

datasetでdata属性(data-*)を更新する

要素の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属性を扱う方法をまとめます。

処理サンプル
data属性(data-*)の取得element.dataset.dataName
data属性(data-*)の設定element.dataset.dataName = '値';
data属性(data-*)の更新element.dataset.dataName = '値';

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

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

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。