どこでも使える属性を活用し、独自のデータを HTML に格納する。
このレッスンを Kodokon で開く一部の属性は どんな要素にも 使えます。これがグローバル属性です。id と class はすでに使っていますね。ここに hidden(要素を隠す)、lang(ある一節の言語を示す)、title(ホバー時のツールチップ)、tabindex(キーボードフォーカスの順序)を道具箱に加えましょう。
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>独自のデータを要素に付けたいですか? でたらめな属性を勝手に発明してはいけません。HTML は、まさにそのために data-* 属性を用意しています。ダッシュのあとの名前は自分で決め、小文字のケバブケースにします。典型的な利用例: 商品の識別子、UI の状態、コンポーネントの設定などです。
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>JavaScript 側では、これらの属性は dataset プロパティ経由で読み取ります。自動変換に注意してください。HTML のケバブケースは JavaScript ではキャメルケースになります。つまり data-product-id は dataset.productId で読み取ります。値は常に 文字列 で、"true" や "42" でさえもそうです。
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";