data属性の名前に使える文字列

data属性を設定する際、名前に使える文字列について調べてみました。

使用できる文字列

MDNのdatasetのページには以下のように記述がありました。

カスタムdata属性の名前はdata-で始まる。また、カスタムdata属性名は文字、数字とダッシュ(-)、ドット (.)、コロン (:)、アンダースコア (_)しか含むことができない。さらに、ASCIIコードの大文字AからZも含むことができない。

引用 – HTMLElement.dataset – Web API | MDN

小文字の半角英字と数字、ハイフン( – )、アンダーバー( _ )、ドット( . )、コロン( : )が使えるようです。
後ほど試しますが、半角英字の大文字は小文字に変換されてしまうので使用不可となっているようです。
さらに続けて以下のように記述されています。

カスタムdata属性名は下記の制限事項に従って DOMStringMapのキーに変換される。

• 接頭辞data-が取り除かれる（ダッシュを含む）
• ASCIIコードの小文字aからzに続くいかなるダッシュ (U+002D)は、変換の際に取り除かれ、続く小文字は大文字に変換される
• 他の文字（他のダッシュも含む）はそのまま変換される

引用 – HTMLElement.dataset – Web API | MDN

ハイフンは除去され次の文字が大文字に変換、アンダーバーなどはそのままになるようです。
　

サンプルコード

実際にいくつか試してみます。

<div class="sample1" data-itemcount="1">小文字のみ</div>
<div class="sample2" data-itemCount="2">キャメルケース</div>
<div class="sample3" data-item-count="3">ハイフン</div>
<div class="sample4" data-item_count="4">アンダーバー</div>
<div class="sample5" data-item.count="5">ドット</div>
<div class="sample6" data-item:count="6">コロン</div>

小文字のみ、キャメルケース(大文字)、ハイフン、アンダーバー、ドット、コロンのパターンをそれぞれ用意しました。
次にdata属性の取得ですが、JavaScriptとjQueryでそれぞれ試してみます。

まずはJavaScriptです。
JavaScriptの場合、取得方法としてgetAttribute()を使う方法とdatasetを使う方法があります。
JavaScriptでのdata属性取得のデモページ

上記サンプルで試したコードを1つずつ確認してみます。

// 小文字のみの場合
var sample1 = document.getElementsByClassName('sample1')[0];
console.log(sample1.getAttribute('data-itemcount')); // 1
console.log(sample1.dataset.itemcount); // 1

sample1の小文字のみの場合は特に問題なく取得できました。

// キャメルケース(大文字)の場合
var sample2 = document.getElementsByClassName('sample2')[0];
console.log(sample2.getAttribute('data-itemCount')); // 2
console.log(sample2.dataset.itemCount); // undefined
console.log(sample2.dataset.itemcount); // 2

sample2の小文字のみの場合、getAttribute()では取得できましたがdatasetで取得できませんでした。
大文字は小文字に変換されてしまうようで、itemCountではなくitemcountとするとdatasetでも取得できました。

// ハイフンを含む場合
var sample3 = document.getElementsByClassName('sample3')[0];
console.log(sample3.getAttribute('data-item-count')); // 3
// console.log(sample3.dataset.item-count); // Uncaught ReferenceError: count is not defined
console.log(sample3.dataset.itemcount); // undefined
console.log(sample3.dataset.itemCount); // 3

sample3のハイフンを含む場合、getAttribute()では取得できましたがdatasetでエラー表示されました。
前述の通りハイフンを除去して次の文字を大文字にして指定することでdatasetでも取得できました。

// アンダーバーを含む場合
var sample4 = document.getElementsByClassName('sample4')[0];
console.log(sample4.getAttribute('data-item_count')); // 4
console.log(sample4.dataset.item_count); // 4

sample4のアンダーバーを含む場合は特に問題なく取得できました。

// ドットを含む場合
var sample5 = document.getElementsByClassName('sample5')[0];
console.log(sample5.getAttribute('data-item.count')); // 5
// console.log(sample5.dataset.item.count); // Uncaught TypeError: Cannot read property 'count' of undefined
console.log(sample5.dataset.itemcount); // undefined
console.log(sample5.dataset.itemCount); // undefined
console.log(sample5.dataset['item.count']); // 5

sample5のドットを含む場合、getAttribute()では取得できましたがdatasetではエラーが表示されました。
ドットの除去やキャメルケースにしても取得できなかったのですが、dataset[‘dataname’]のように指定することでも取得できるとのことで、試してみると取得できました。

// コロンを含む場合
var sample6 = document.getElementsByClassName('sample6')[0];
console.log(sample6.getAttribute('data-item:count')); // 6
// console.log(sample6.dataset.item:count); // Uncaught SyntaxError: missing ) after argument list
console.log(sample6.dataset.itemcount); // undefined
console.log(sample6.dataset.itemCount); // undefined
console.log(sample6.dataset['item:count']); // 6

sample6のコロンを含む場合はsample5と同様で、getAttribute()はそのまま取得できて、datasetはdataset[‘dataname’]の形で取得できました。
　

次にjQueryの場合を試してみます。

$(function() {
	console.log($('.sample1').attr('data-itemcount')); // 1
	console.log($('.sample1').data('itemcount')); // 1

	console.log($('.sample2').attr('data-itemCount')); // 2
	console.log($('.sample2').data('itemCount')); // undefined
	console.log($('.sample2').data('itemcount')); // 2

	console.log($('.sample3').attr('data-item-count')); // 3
	console.log($('.sample3').data('item-count')); // 3
	console.log($('.sample3').data('itemcount')); // undefined
	console.log($('.sample3').data('itemCount')); // 3

	console.log($('.sample4').attr('data-item_count')); // 4
	console.log($('.sample4').data('item_count')); // 4

	console.log($('.sample5').attr('data-item.count')); // 5
	console.log($('.sample5').data('item.count')); // 5

	console.log($('.sample6').attr('data-item:count')); // 6
	console.log($('.sample6').data('item:count')); // 6
});

jQueryでのdata属性取得のデモページ

jQueryの場合もJavaScriptで試した時と基本的には同じで、大文字を含んでいる場合はdata()では大文字を小文字に変換、ハイフンを含む場合は除去してそのあとの値を大文字に変換することで取得できました。
　

【参考サイト】

• HTMLElement.dataset – Web API | MDN
• data-* – HTML: HyperText Markup Language | MDN