Attribut HTML universel : data-*

Lesattributs universelsdata-* forment une classe d'attributs, appelésattributs de données personnalisés (custom data attributes en anglais), ils permettent d'échanger des données propriétaire entre leHTML et la représentation duDOM, qu'on peut manipuler avec des scripts.

Exemple interactif

<h1>Agents secrets</h1><ul>  <li data-id="10784">    Jason Walters, 003&nbsp;: retrouvé mort dans «&nbsp;A View to a Kill&nbsp;».  </li>  <li data-id="97865">    Alex Trevelyan, 006&nbsp;: agent devenu chef terroriste&nbsp;; ennemi juré    de James dans «&nbsp;Goldeneye&nbsp;».  </li>  <li data-id="45732">    James Bond, 007&nbsp;: l'homme principal&nbsp;; imperturbable mais pas    remué.  </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 #eeeeee;  opacity: 0;  transition: 0.5s opacity;}li:hover::after {  opacity: 1;}

Tous ces attributs de données personnalisés sont accessibles via l'interfaceHTMLElement de l'élément sur lequel l'attribut est défini. La propriétéHTMLElement.dataset permet d'y accéder.Le* peut être remplacé par n'importe quel nom respectantla règle de production des noms XML^(angl.), qui inclut les recommandations suivantes :

Le nom ne doit pas commencer parxml (insensible à la casse), car cela est réservé aux futures spécifications XML.
Le nom ne doit pas contenir de caractère deux-points (:), car XML attribue une signification à de tels noms.
Le nom ne doit pas contenir de lettres majuscules, car XML est en minuscules.

Ce ne sont que des recommandations. Si elles ne sont pas suivies, aucune erreur ne se produira : les attributs seront toujours repérés par lessélecteurs d'attributs CSS, l'attribut étant insensible à la casse tandis que la valeur de l'attribut reste sensible à la casse. Les attributs ne respectant pas ces trois recommandations seront également reconnus par la propriété JavaScriptHTMLElement.dataset et les agents utilisateurs incluront l'attribut dans leDOMStringMap contenant tous les attributs de données personnalisés d'unHTMLElement.

Si vous prévoyez d'utiliserHTMLElement.dataset, la partie du nom d'attribut suivantdata- ne peut contenir que des caractères autorisés dans les noms de propriété JavaScript (et des tirets, qui seront supprimés). La versiondataset du nom d'attribut supprime le préfixe "data-" et convertit le reste du nom dekebab-case en camelCase. Par exemple,element.getAttribute("data-test") équivaut àelement.dataset.test etdata-test-abc sera accessible commeHTMLElement.dataset.testAbc (ou viaHTMLElement.dataset["testAbc"]). Évitez les caractères non alphabétiques après un tiret, commedata-test-1 oudata--test, car ils ne seront pas reconnus parHTMLElement.dataset.

Notes d'utilisation

En ajoutant des attributsdata-*, même les éléments HTML ordinaires peuvent devenir des objets de programme assez complexes et puissants. Par exemple, un vaisseau spatial « sprite » dans un jeu pourrait simplement être un élément<img> avec un attributclass et plusieurs attributsdata-* :

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 cliqueSurLeVaisseau() {  spaceships[this.dataset.shipId].blasted();}document.querySelectorAll("img.spaceship").forEach((ship) => {  ship.addEventListener("click", cliqueSurLeVaisseau);});

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