【JavaScript】かんたん！data属性の取得、設定、更新【dataset】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

data属性ってなに?

正式名称をカスタムデーター属性

html要素に「data-〇〇」から始まる好きな名前を入れたカスタムデータを持たせることができます。

実は、data属性の取得・追加・更新といった操作を簡単に実行できる便利なプロパティが用意されています。

さっそく「取得・追加・更新」の3種類の使い方を見ていきましょう。

data属性（data-〇〇）を「設定」する

まず、data属性を設定する方法です。
カスタムデータは呼び名の通り、好きなデータ名を設定することができます。

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

let youso = document.getElementById("element")
youso.dataset.sukinaName= 'tanaka'

「■■に〇〇という名前のデータとして△△を設定する」という処理です。

まとめるとこのようになります。

つまり「youso.dataset.sukinaName= 'tanaka'」は
yousoにsukinaNameという名前のデータとしてtanakaを設定したことになります。

data属性（data-〇〇）を「取得」する

データを設定したので、今度は取得してみましょう。
下記htmlから「data-sukinaName」の値を取得してみます。

<div id="youso" data-sukinaName="tanaka"></div>

まず、idでhtml要素を取得。次に、datasetで指定します。
注意することは「data-sukinaName」から「data-」を除いた属性名(自分で決めたデータ名)を指定することです。

「変数.dataset.自分で決めたデータ名」で値を取得できます。

let youso = document.getElementById("youso")
console.log(youso.dataset.sukinaName) // "tanaka"

設定していたtanakaを取得することができましたね。

data属性（data-〇〇）を「更新」する

最後に、data属性を設定する方法です。
「data-sukinaName」が持っている値「tanaka」を「honda」に更新してみます。

設定（追加）する際と全く同じ方法で更新することができます。

新しい値を代入することで、カスタムデータ属性の値を更新することができます。

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

let youso = document.getElementById("element")
youso.dataset.sukinaName= 'tanaka'
console.log(youso.dataset.sukinaName) // "tanaka"

youso.dataset.sukinaName= 'honda'
console.log(youso.dataset.sukinaName) // "honda"

一点だけ注意です。
もし、「data-sukina-name」のようにハイフンを並べて記述する場合、キャメルケースにして更新する値を代入します。

まとめ

最後に、detasetでdata属性を扱う方法をまとめます。