JavaScript | data属性の値を取得する方法

2022-02-14

JavascriptでHTMLで指定しているdata属性の値を取得する方法を紹介しています。

data属性の値を取得する

JavascriptでHTMLで指定されているdata属性の値を取得する動作サンプルとサンプルコードになります。

See the Pen JavaScript | Get a user agent by yochans (@yochans) on CodePen.

HTMLには、動作テスト用に「data-num」と名付けたdata属性を指定したdivタグをひとつ用意しています。

<div id="item" data-name="abc"></div>

上記のHTMLから独自属性dataの「data-num」の値を取得するにはdatasetプロパティを利用します。

datasetはオブジェクトデータとして取得しますので、取得したいdata属性の任意の名前部分を「.」で繋げて取得する事ができます。

let name = document.querySelector('#item').dataset.name;
console.log(name);

// abc

複数のdata属性の値を取得する

複数のdata属性の値を取得する場合は一度、datasetプロパティを変数に格納してから取り出します。

<div id="item" data-num="123" data-name="abc"></div>
let dataset = document.querySelector('#item').dataset;

console.log(dataset.num);
console.log(dataset.name);

// 123
// abc

data属性の値を変更する方法、属性を削除する方法は以下のページで紹介しています。

関連:Javascript | data属性の値を変更または削除する方法 | ONE NOTES