• JavaScript

JSでHTMLのデータ属性を取得・更新する方法【datasetプロパティ】

投稿日:2024年10月02日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

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」という値を持たせています。

<p class="myFruits" data-en="apple">りんご</p>

JavaScriptでは、まずクラス名をセレクターに要素を指定し（1行目）、datesetでデータ属性名を指定してその値を取得しています（2行目）。

今回はデータ属性名が「data-en」なので、datasetの後ろには「en」を付けます。

var myFruits = document.querySelector(".myFruits");
var en = myFruits.dataset.en;
console.log(en);//結果はapple

data属性の値の変更

続いては、datasetを使ってデータ属性の値を書き換える方法です。

下記は、HTMLに設定されたデータ属性の値（apple）をdatasetを使って別の値（アップル）に変更する例です。

（※HTMLは先ほどと同じなので割愛します）

クラス名をセレクターに要素を指定しするまでは先ほどと同様です（1行目）。

2行目指定したデータ属性名に対して、新しい値「アップル」を代入しています。

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」というデータ属性を持っていないため、値の変更ではなく、データ属性の追加という処理が行われます。

var myFruits = document.querySelector(".myFruits");
myFruits.dataset.color = "red";
console.log(myFruits.dataset.color);//結果はred

まとめ

以上が、JavaScriptのdatasetプロパティを使ってHTML要素に設定されたデータ属性（data-***）を取得したり変更したりする方法です。

HTML要素自体にデータを持たせ、JavaScriptで操作できるようになれば、動的なWebアプリケーション作成時に大いに活用できます。