HOME > - JavaScript >
- JSでHTMLのデータ属性を取得・更新する方法【datase...
JavaScriptのdatasetで要素のdata属性を操作する
JavaScriptのdatasetは、HTML要素に設定されたデータ属性（data-***）を取得したり更新できるプロパティです。
データ属性とは？
HTMLのデータ属性は、要素自体に独自の情報を付与するための属性です。data-という接頭辞を付けて自由に属性名を定義できます。
データ属性を使うメリットは以下の通りです。
- CSSのクラスやIDでは表現しづらい情報を要素に設定することができる。
- 要素に関連する情報を、要素そのものに持たせることができる。
datasetを使うとHTML自体に保持させたデータ情報を操作できるので、さまざまな処理を作る際に重宝します。
このページではこのdatasetプロパティの使い方について備忘録としてまとめていきます。
data属性の値の取得
まずはじめに、datasetを使ってHTML要素に設定されたデータ属性（data-***）の値を取得する方法です。
HTMLのデータ属性の「***」の部分をdatasetの後ろにつけて、どのデータ属性かを指定します。
下記は、データ属性が設定されたHTMLの要素からdatasetを使ってそのデータの値（apple）を取得する例です。
p要素に「data-en」というデータ属性を追加し、「apple」という値を持たせています。
HTML
<p class="myFruits" data-en="apple">りんご</p>
JavaScriptでは、まずクラス名をセレクターに要素を指定し（1行目）、datesetでデータ属性名を指定してその値を取得しています（2行目）。
今回はデータ属性名が「data-en」なので、datasetの後ろには「en」を付けます。
JavaScript
var myFruits = document.querySelector(".myFruits");
var en = myFruits.dataset.en;
console.log(en);//結果はapple
data属性の値の変更
続いては、datasetを使ってデータ属性の値を書き換える方法です。
下記は、HTMLに設定されたデータ属性の値（apple）をdatasetを使って別の値（アップル）に変更する例です。
（※HTMLは先ほどと同じなので割愛します）
クラス名をセレクターに要素を指定しするまでは先ほどと同様です（1行目）。
2行目指定したデータ属性名に対して、新しい値「アップル」を代入しています。
JavaScript
var myFruits = document.querySelector(".myFruits");
myFruits.dataset.en = "アップル";
console.log(myFruits.dataset.en);//結果はアップル
新しいdata属性の追加
最後はdatasetを使ってHTML要素に新しいデータ属性を設定する方法です。
datasetの書き方は値を変更するときと同じですが、datasetで指定したデータ属性名を要素が持っていない場合は、その属性と値が要素に追加されます。
下記は、HTMLに新しいデータ属性（data-color）と値（red）を追加する例です。
（※HTMLは先ほどと同じなので割愛します）
クラス名をセレクターに要素を指定しするまでは先ほどと同様です（1行目）。
2行目の記述の仕方は先ほど値を変更した時と同様ですが、対象のHTML要素は「data-color」というデータ属性を持っていないため、値の変更ではなく、データ属性の追加という処理が行われます。
JavaScript
var myFruits = document.querySelector(".myFruits");
myFruits.dataset.color = "red";
console.log(myFruits.dataset.color);//結果はred
まとめ
以上が、JavaScriptのdatasetプロパティを使ってHTML要素に設定されたデータ属性（data-***）を取得したり変更したりする方法です。
HTML要素自体にデータを持たせ、JavaScriptで操作できるようになれば、動的なWebアプリケーション作成時に大いに活用できます。