JavaScript 要素に独自のデータ属性を取得・設定する方法
JavaScriptで、要素に独自のデータ属性（data-*）を取得・設定する方法を紹介します。
データ属性とは
例えば、<input type="text">の属性にはreadonlyやmaxlengthなどがありますが、これらの属性はすでに意味づけされた属性です。
それに対して、データ属性はdata-fooやdata-barのようにdata-xxxのxxxの部分を自由に変更して、独自の属性を定義できます。
属性名の最初にdata-をつけなくても、独自の属性は定義することは可能ですが、独自の名前で定義した属性（例えばfoobar）が、将来的にreadonlyやmaxlengthのように特別な意味を持つ属性になってしまうと、動作が変わってしまいます。
data-は将来的にそのようなことがないことが保証されているので、独自の属性を使用するときはdata-*の形式で定義するのが一般的です。
要素の取得
以下のように、取得したい要素にidを付与します。
htmlの要素にアクセスする手段はいろいろありますが、idを使ってアクセスするのが一番シンプルですので、ここでidを指定します。
<div id="div1">
<input type="text" id="txt1">
</div>idを使って、対象のテキストボックスを取得します。
document.getElementById('取得したい要素のid')で、要素を取得できます。
const div1 = document.getElementById('div1');
const txt1 = document.getElementById('txt1');データ属性の取得・設定
以下の例では、div1要素にデータ属性data-test1を設定しています。
const div1 = document.getElementById('div1');
div1.setAttribute('data-test1', 'あいうえお');
// または
div1.dataset.test1 = 'あいうえお';htmlとして見ると以下の状態になります。
<div id="div1" data-test1="あいうえお">
<input type="text" id="txt1">
</div>データ属性を取得するにはgetAttributeを使用します。
const div1 = document.getElementById('div1');
const value = div1.getAttribute('data-test1');
// または
const value = div1.dataset.test1;「-」を含む場合のアクセス
dataset.xxxでアクセスする場合、xxxはキャメルケース(camelCase)にする必要があります。
例えば以下のようにdata-test-numberのデータ属性を取得したいときがあります。
<div id="div1" data-test-number="5">
<input type="text" id="txt1">
</div>test-numberをキャメルケースtestNumberでアクセスします。
または、ブラケット構文を利用すればそのままtest-numberでアクセスすることも可能です。
const div1 = document.getElementById('div1');
const value = div1.dataset.testNumber;
// または
const value = div1.dataset['test-number'];