HTMLのカスタムデータ属性をJavaScriptから扱う方法について説明していきます。
- カスタムデータ属性
- dataset
カスタムデータ属性
・ ボタンをクリックしたら h1をwelcome!と表示されるようにしてみましょう。
・targetNode.textContent を変えてあげれば良いです。welcome!と書いてあげましょう。
・ただ、 h1 に関するものなので、クラス属性と一緒に管理できたら便利です。
・HTML では、 data- から始まっていれば独自の属性を付けられるので、 data-translation 属性を作ってあげて、値をwelcome!にしてあげましょう。
dataset
・こちらの値にアクセスするには、同名のプロパティである data-translation とすれば良いかと思いますが、クラス属性とカスタムデータ属性だけは例外的に違う書き方が違い。dataset.translationとしてあげる必要があります。
・こうしたカスタムデータ属性も JavaScript から扱えるようになっておくと良いでしょう。