Contrairement à XML, HTML impose les balises que l'on peut utiliser dans une page Web ainsi que les attributs possibles pour chacune d'elles. Rien d'extraordinaire à cela, c'est même sa raison d'être : structurer un document selon des balises ayant un sens sémantique.Sauf que cette restriction correspond de moins en moins aux besoins réels du Web moderne et des applications internet riches (Rich Internet Applications ou RIA en anglais) qui utilisent beaucoup de JavaScript et demandent d'avoir accès facilement à des données additionnelles de celles affichées sur la page.
Pour pallier cette limitation, HTML5 permet désormais de créer des attributs personnalisés pour stocker les données dont on peut avoir besoin au cours de la durée de vie de la page.
Ces attributs possèdent une syntaxe prédéfinie et une API JavaScript pour faciliter leur utilisation.
Syntaxe
Les attributs personnalisés (appelés aussi data-*) doivent impérativement commencer par data- puis peuvent contenir des lettres, des chiffres et les caractères tiret (-), point (.), underscore (_) ou deux-points (:).
Les lettres doivent obligatoirement être en minuscules, nous allons voir pourquoi.
La valeur de ces attributs personnalisés est n'importe quelle valeur textuelles, car HTML n'étant pas un langage de programmation, la notion de type de donnée n'existe pas.
API JavaScript dataset
L'API JavaScript dataset est celle qui va permettre de récupérer et affecter les valeurs de ces attributs.
Tout objet JavaScript de type HTMLElement possède une collection dataset permettant de récupérer ou d'attribuer les valeurs existantes ou d'en affecter de nouvelles.
Par exemple, si une balise possède un attribut data-foo="bar", HTMLElement.dataset.foo aura pour valeur "bar".
Pour récupérer la valeur de l'attribut, il suffit donc d'utiliser le nom de l'attribut sans la partie commune data-.
Enfin... il suffit, c'est vite dit.
En effet, on a vu qu'il est possible de mettre des tirets dans le nom de l'attribut, or, le tiret, en JavaScript, c'est une soustraction, donc si on veut récupérer l'attribut data-foo-bar="baz", la syntaxe HTMLElement.dataset.foo-bar signifiera en réalité la soustraction de HTMLElement.dataset.foo et de la variable bar, aucune de ces deux valeurs n'étant supposée exister, cela provoquera une erreur.
Cette problématique existe d'ailleurs pour la collection de styles CSS HTMLElement.style. Comme aux mêmes maux on applique les mêmes remèdes, la règle sera identique pour les attributs personnalisés que pour les styles : on applique une transformation camel case, à savoir que pour passer de HTML à JavaScript, on supprime le tiret et on remplace la lettre qui suit par sa majuscule et pour le passage JavaScript HTML, on transforme la majuscule en minuscule en plaçant un tiret devant. D'où l'interdiction des majuscules dans les attributs HTML.
Exemple récapitulatif
Vous trouverez sur cette page un exemple d'utilisation des attributs personnalisés : Utilisation de l'API dataset.
En résumé, cette page présente un bouton dont le code HTML est le suivant
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 | <button data-base="Attribut base" data-1="Attribut numérique" data-avec-tiret="Attribut avec tiret" data-avec-tiret.et:points="Attribut avec tiret et points" data-MAJUSCULES="Attribut avec majuscules" onclick="read(this)" >Lire les attributs data de ce bouton</button> |
| Code javascript : | Sélectionner tout |
1 2 3 4 5 | function read(elem){ for(var attribut in elem.dataset){ console.log(attribut + ' : ' + elem.dataset[attribut]); } } |
majuscules : Attribut avec majuscules
avecTiret.et:points : Attribut avec tiret et points
avecTiret : Attribut avec tiret
1 : Attribut numérique
base : Attribut base
Il faut aussi garder en mémoire que l'API dataset n'est compatible pour Internet Explorer qu'à partir de la version 11. Il faudra donc penser à créer ou utiliser un polyfill pour les versions antérieures.
Pour s'assurer de la disponibilité de l'API, un simple test suffit
| Code javascript : | Sélectionner tout |
var hasDataset = ('dataset' in document.createElement('div'));
Certaines bibliothèques permettent un traitement compatible, par exemple la fonction .data() de jQuery.