DOMおれおれAdvent Calendar 2015 – 17日目分

2015-12-17

HTML5になって data-xxx という形の任意の属性を、あらゆるタグに書けるようになりました。属性なので getAttribute() とかで扱えるんだけど、それとは別に専用の dataset というものもあります。

var el;  // => <div data-foo="123" data-sushi-type="roll" />

// 取得
console.log(el.getAttribute('data-foo'));  // => "123"
console.log(el.dataset.foo);               // => "123"

// 設定
el.dataset.foo = "Woof!";
console.log(el.getAttribute('data-foo'));  // => "Woof!"

// ハイフン繋がりの名前
console.log(el.dataset.sushiType);  // => "roll"

というわけで、こんな感じです。

  • data-xxx について el.dataset.xxx の書式でアクセスできる
  • 名前がハイフン繋がり data-xxx-yyy の場合はキャメルケース xxxYyy になる
  • 設定値は文字列のみ
    • 非文字列は文字列へ変換される（例: null → "null" ）
    • ちなみに setAttribute() の値に null を指定すると、 removeAttribute() の動作になる
  • 属性がなければ null が返る
  • 属性値がなければから文字列 "" が返るっぽい（場合によるかも）
  • delete el.dataset.xxx で data-xxx 属性を削除

環境

IE 11+。他は問題なし。

古いIEに対応するなら getAttribute() 系で頑張るしかないね。 (´・ω・`)

参考