data-*

De tels attributs sont disponibles via l'interface HTMLElement de l'élément pour lequel l'attribut est utilisé. La propriété HTMLElement.dataset permet d'accéder à l'attribut. Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

• Le nom ne peut pas commencer par xml, quelle que soit la casse utilisée pour les différentes lettres
• Le nom ne doit pas contenir de point-virgule (U+003A)
• Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (A à Z).

La propriété HTMLElement.dataset est un objet StringMap et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément <img> auquel on associe un attribut class et plusieurs attributs de données sous la forme data-*.

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

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

• Les différents attributs universels
• La propriété HTMLElement.dataset qui permet d'accéder à ces valeurs et de les modifier.