dom_dom0300_010

次のコードで、カスタム属性 data-id=”123″ の値を取得する正しい方法はどれか。

[ html ]

<div id="box" data-id="123"></div>
  1. document.getElementById(“box”).getAttribute(“data-id”)
  2. document.getElementById(“box”).dataset.id
  3. 両方とも可能
  4. どちらも不可
正解
  1. 両方とも可能
解説

カスタムデータ属性は getAttribute(“data-属性名”) または dataset.属性名 の両方で取得可能。

使用例(サンプルコード)

[ javascript ]

let box = document.getElementById("box");
console.log(box.getAttribute("data-id")); // "123"
console.log(box.dataset.id);              // "123"