[解決済み] jQuery を使わずに 'data-' 属性にアクセスする

質問

jQueryを使わずにdata-属性にアクセスすることはできますか？

jQueryを使えば簡単なのですが、jQueryを使わないで行う方法がどこにも書いてありません。

Googleで「jQueryなし」と検索しても、jQueryの例しか出てきません。

それは可能なのでしょうか？

どのように解決するのですか？

以下の通りです。 ここで こんな例がありました。

<div id='strawberry-plant' data-fruit='12'></div>
<script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
    // 'Setting' data-attributes using setAttribute
    plant.setAttribute('data-fruit', '7'); // Pesky birds
</script>

というわけで、非常にやりやすいと思われます。

更新: Microsoft は現在 (2020 年)、古い Internet Explorer エンジンを段階的に廃止し、Chromium ベースの Edge を採用するため dataset プロパティはどこでも機能すると思われます。ただし、IE がまだ強制されている組織や企業ネットワークは一時的に例外となる予定です。しかし、これを書いている時点では jsPerf は、少なくとも Chrome 81 では、get/setAttribute メソッドが dataset を使用するより高速であることを示しています。