data-*: attributo HTML

Gli attributi script-* formano una classe di attributi chiamati attributi di dati personalizzati , che consentono lo scambio di informazioni proprietarie tra l' HTML e la sua rappresentazione DOM tramite script.

Tutti questi dati personalizzati sono disponibili tramite l'interfaccia HTMLElement dell'elemento su cui è impostato l'attributo. La proprietà HTMLElement.dataset dà accesso ad essi. * può essere sostituito da qualsiasi nome seguendo la regola di produzione dei nomi XML con le seguenti restrizioni:

• Il nome non deve iniziare con xml (senza distinzione tra maiuscole e minuscole).
• Il nome non deve contenere caratteri due punti (:).
• Il nome non deve contenere lettere maiuscole.

Si noti che la proprietà HTMLElement.dataset è a DOMStringMap e il nome dell'attributo di dati personalizzato data-test-value sarà accessibile tramite HTMLElement.dataset.testValue (o tramite HTMLElement.dataset["testValue"]) poiché qualsiasi trattino (U+002D) viene sostituito dalla maiuscola della lettera successiva, convertendo il nome in camelcase.

Utilizzo

Aggiungendo attributi data-*, anche i normali elementi HTML possono diventare oggetti di programma piuttosto complessi e potenti. Ad esempio, uno " sprite " di un'astronave in un gioco potrebbe essere un semplice elemento <img> con un attributo class e diversi attributi data-*:

<img class="spaceship cruiserX3" src="shipX3.png"
data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
data-x="414354" data-y="85160" data-z="31940"
onclick="spaceships[this.dataset.shipId].blasted()">