Un élément HTML peut avoir besoin de conserver « en interne » des informations
Pour que JS puisse facilement avoir ces informations
Solution : attributs data-*
Tout attribut commençant par data- est ignoré par le navigateur
Attributs data-* sont destinés à être utilisés uniquement par les scripts de la page
Ne pas y mettre de données sensibles : même si ces données sont ignorées par le navigateur, elles sont visibles avec un simple « Voir le code source de la page » du navigateur !
Exemple :
<ol>
<li data-length="2m11s">Beyond The Sea</li>
...
</ol>
Propriété dataset
Tout noeud de l'arbre DOM de type Element possède une propriété dataset
dataset est un objet représentant tous les attributs data-* de lélément
Noms des propriétés transformées en camelCase (comme pour elt.style.fontSize)
Exemple :
<ol>
<li id="sea" data-length="2m11s" data-original-singer="Frank Sinatra">Beyond The Sea</li>
...
</ol>