zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript 要素に独自のデータ属性を取得・設定する方法

JavaScriptで、要素に独自のデータ属性(data-*)を取得・設定する方法を紹介します。

データ属性とは

例えば、<input type="text">の属性にはreadonlymaxlengthなどがありますが、これらの属性はすでに意味づけされた属性です。

それに対して、データ属性はdata-foodata-barのようにdata-xxxxxxの部分を自由に変更して、独自の属性を定義できます。

属性名の最初にdata-をつけなくても、独自の属性は定義することは可能ですが、独自の名前で定義した属性(例えばfoobar)が、将来的にreadonlymaxlengthのように特別な意味を持つ属性になってしまうと、動作が変わってしまいます。

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'];


関連記事