JavaScript dataset property.
JavaScriptで data属性（カスタムデータ属性）を操作するプロパティのご紹介です。
data属性、正式にはカスタムデータ属性は、HTMLの要素に「data-*」から始まる任意の名前を付けたカスタムデータを持たせることができる属性です。主にスクリプトでデータを扱う場合に指定することが多い属性になります。
スクリプトで扱うことが多いため、JavaScriptには data属性の取得・追加・更新といった操作を簡単に実行することができる便利なプロパティが用意されています。「dataset」というプロパティになります。
もちろん、HTML要素の属性を取得する「getAttribute」や属性を設定する「setAttribute」を使って data属性の取得や設定は可能ですが、datasetの方がシンプルに記述することができますし、パフォーマンスも高いようです。
data属性の値を取得する方法です。下記の HTMLから「data-name」の値を取得してみます。
<div id="element" data-name="test"></div>
idで要素を取得して、datasetで dataを指定します。その際に「data-name」から「data-」を除いた属性名「name」を指定します。
const element = document.getElementById('element');
element.dataset.name
もし、data属性名が「data-user-name」のように複数の単語をハイフンで繋いでいる場合は、ハイフンをキャメルケースに置き換えます。
const element = document.getElementById('element');
element.dataset.userName;
要素に data属性を設定（追加）する方法です。下記の HTMLに「data-name」という data属性に「test」という値を設定・追加してみます。
<div id="element"></div>
取得する際と同様に記述して、イコールで値を代入します。
const element = document.getElementById('element');
element.dataset.name = 'test';
もし、「data-user-name」のように複数の単語をハイフンで記述している場合は、キャメルケースに置き換えます。
const element = document.getElementById('element');
element.dataset.userName = 'test';
要素の data属性の値を更新する方法です。下記の HTMLの「data-name」が持っている値「test」を「testtest」に更新してみます。
<div id="element" data-name="test"></div>
設定（追加）する際と同様の記述になります。新しい値を代入することで、カスタムデータ属性の値を更新することができます。
const element = document.getElementById('element');
element.dataset.name = 'testtest';
もし、「data-user-name」のようにハイフンで記述している場合は、キャメルケースに置き換えて更新する値を代入します。
const element = document.getElementById('element');
element.dataset.userName = 'testtest';