JavaScriptでdata属性を扱う

data属性をjQueryで使う方法は以前記事で投稿しましたが、今回はJavaScriptでdata属性を扱ってみます。

data属性の取得

data属性の取得する方法として、datasetを使用する方法とgetAttribute()を使用する方法があります。

HTML

<div id="sample1" data-num="7">リンゴ</div>
<div id="sample2" data-num="5">バナナ</div>

JavaScript

var target1 = document.getElementById('sample1');
var target2 = document.getElementById('sample2');

// data属性の取得
console.log(target1.getAttribute('data-num')); // 7
console.log(target2.dataset.num); // 5

console.log(target1.getAttribute('data-num') + target2.getAttribute('data-num')); // 75
console.log(target1.dataset.num + target2.dataset.num); // 75

8～9行目で取得した値の演算を試していますが、jQueryの場合は取得方法によって型が変わっていたのに対して、JavaScriptの場合はどちらの方法でも文字列として値を取得しています。
data属性の取得のデモページ
　

data属性の設定

data属性を設定してみます。
設定する場合はdatasetかsetAttribute()を使用します。

HTML

<div id="sample1">リンゴ</div>
<div id="sample2">バナナ</div>

JavaScript

var target1 = document.getElementById('sample1');
var target2 = document.getElementById('sample2');

// data属性の取得
target1.setAttribute('data-num', 50);
target2.dataset.num = 18;

// 設定できたか確認
console.log(target1.getAttribute('data-num')); // 50
console.log(target2.dataset.num); // 18

data属性の設定のデモページ
　

data属性の変更

設定されているdata属性の値を変更してみます。

HTML

<div id="sample1" data-num="7">リンゴ</div>
<div id="sample2" data-num="5">バナナ</div>

JavaScript

var target1 = document.getElementById('sample1');
var target2 = document.getElementById('sample2');

// data属性の取得
console.log(target1.getAttribute('data-num')); // 7
console.log(target2.getAttribute('data-num')); // 5
console.log(target1.dataset.num); // 7
console.log(target2.dataset.num); // 5

// data属性の変更
target1.setAttribute('data-num', 50);
target2.dataset.num = 18;

// data属性を再度取得
console.log(target1.getAttribute('data-num')); // 50
console.log(target2.getAttribute('data-num')); // 18
console.log(target1.dataset.num); // 50
console.log(target2.dataset.num); // 18

jQueryの場合は使用する方法によって挙動が変わっていましたが、JavaScriptの場合は特に挙動の差はなさそうでした。
data属性の変更のデモページ
　

data属性に大文字やハイフンを使用した場合

data属性に大文字とハイフン繋ぎを設定して、取得できるかを試してみます。

HTML

<div id="sample1" data-itemNum="7">リンゴ</div>
<div id="sample2" data-item-num="5">バナナ</div>

JavaScript

var target1 = document.getElementById('sample1');
var target2 = document.getElementById('sample2');

// data属性の取得
console.log(target1.getAttribute('data-itemNum')); // 7
console.log(target2.getAttribute('data-item-num')); // 5
console.log(target1.dataset.itemNum); // undefined
console.log(target2.dataset.itemNum); // 5
console.log(target2.dataset.itemnum); // undefined
console.log(target2.dataset.item-num); // error

getAttribute()の場合はどちらも取得できました。
datasetの場合、大文字は取得できませんでしたが、ハイフンの場合はハイフンを除去して接続文字を大文字にすることで、取得することができました。
data属性に大文字やハイフンを使用した場合のデモページ
　

【参考サイト】

• HTMLElement.dataset – Web API インターフェイス | MDN