• HOME > 
  • JavaScript > 
  • JSでHTMLのデータ属性を取得・更新する方法【datase...

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

投稿日:

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

カテゴリー記事のアイキャッチ画像
広告
広告

JavaScriptのdatasetで要素のdata属性を操作する

JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-***)を取得したり更新できるプロパティです。

データ属性とは?

HTMLのデータ属性は、要素自体に独自の情報を付与するための属性です。data-という接頭辞を付けて自由に属性名を定義できます。

HTMLのデータ属性の例

データ属性を使うメリットは以下の通りです。

  • CSSのクラスやIDでは表現しづらい情報を要素に設定することができる。
  • 要素に関連する情報を、要素そのものに持たせることができる。

datasetを使うとHTML自体に保持させたデータ情報を操作できるので、さまざまな処理を作る際に重宝します。

このページではこのdatasetプロパティの使い方について備忘録としてまとめていきます。

data属性の値の取得

まずはじめに、datasetを使ってHTML要素に設定されたデータ属性(data-***)の値を取得する方法です。

HTMLのデータ属性の「***」の部分をdatasetの後ろにつけて、どのデータ属性かを指定します。

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を使ってデータ属性の値を書き換える方法です。

datasetの書き方2

下記は、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アプリケーション作成時に大いに活用できます。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。