HTML data-* グローバル属性

data-*グローバル属性はカスタムデータ属性と呼ばれる種類の属性を作り、HTML と、スクリプトによるDOM 表現との間で、固有の情報を交換できるようにします。

試してみましょう

<h1>Secret agents</h1><ul>  <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>  <li data-id="97865">    Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in    "Goldeneye".  </li>  <li data-id="45732">    James Bond, 007: The main man; shaken but not stirred.  </li></ul>

h1 {  margin: 0;}ul {  margin: 10px 0 0;}li {  position: relative;  width: 200px;  padding-bottom: 10px;}li::after {  content: "Data ID: " attr(data-id);  position: absolute;  top: -22px;  left: 10px;  background: black;  color: white;  padding: 2px;  border: 1px solid #eee;  opacity: 0;  transition: 0.5s opacity;}li:hover::after {  opacity: 1;}

すべてのカスタムデータは、属性を設定した要素のHTMLElement インターフェイスを通して使用できます。HTMLElement.dataset プロパティがそれらへのアクセス手段を提供します。* は、XML 名の作成規則に加えて以下の推奨事項に従う名前に置き換えることができます。

大文字小文字にかかわらず、名前をxml で始めてはならない（将来の XML 仕様で予約されているため）。
名前にコロン (:) を含めてはならない（XML ではそのような名前に意味を割り当てているため）。
名前に大文字を含めてはならない（XML はすべて小文字であるため）。

これらは推奨事項です。これらの命名に関する推奨事項に従わなくても、エラーは発生しません。属性は、CSS の属性セレクターを使用して照合され、属性は大文字と小文字を区別せず、属性値は区別されます。この 3 つの推奨事項に適合しない属性も、JavaScript のHTMLElement.dataset プロパティによって認識され、ユーザーエージェントは、HTMLElement のすべての独自のデータ属性を格納するDOMStringMap にその属性を記載します。

HTMLElement.dataset を使用する場合、data- に続く属性名には、JavaScript プロパティ名で使用できる文字（およびハイフン、これは除去されます）のみを含めることができます。属性名のdataset バージョンでは、 "data-" という接頭辞が除去され、残りの名前はケバブケースからキャメルケースに変換されます。例えば、element.getAttribute("data-test") はelement.dataset.test と同等であり、data-test-abc はHTMLElement.dataset.testAbc （またはHTMLElement.dataset["testAbc"]）としてアクセスできます。ハイフンの後にアルファベット以外の文字が続くdata-test-1 やdata--test は、HTMLElement.dataset によって認識されないため、避けるようにしてください。

使い方

data-* 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "スプライト" を、単純な<img> 要素にclass 属性といくつかのdata-* 属性を設定したもので表すことができるでしょう。

html

<img   src="shipX3.png"  data-ship-id="324"  data-weapons="laserI laserII"  data-shields="72%"  data-x="414354"  data-y="85160"  data-z="31940" />

function clickSpaceship() {  spaceships[this.dataset.shipId].blasted();}document.querySelectorAll("img.spaceship").forEach((ship) => {  ship.addEventListener("click", clickSpaceship);});

もっと深い HTML のデータ属性の使用については、データ属性の使用を参照してください。