Utiliser les attributs de données
=================================

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs `data-*` nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à `Node.setUserData()`.

Syntaxe HTML
------------

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (*data attribute*). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :


```html
<article
 id="voitureelectrique"
 data-columns="3"
 data-index-number="12314"
 data-parent="voitures">
  ...
</article>
```

Accéder via du code JavaScript
------------------------------

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser `getAttribute()` avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un `DOMStringMap` (en-US) peut être lu via une propriété `dataset`.

Pour obtenir un attribut `data` avec l'objet `dataset`, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe `data-` (notez que les tirets sont convertis en *camelCase*).


```js
var article = document.getElementById("voitureelectrique");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "voitures"
```


Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre `article.dataset.columns = 5` mettrait l'attribut à `"5"`.

Accéder via du code CSS
-----------------------

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction `attr()` :


```css
article::before {
  content: attr(data-parent);
}
```


Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :


```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```


Tout cela est visible dans l'exemple JSBin.

Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de capture vidéo d'écran où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

Problèmes
---------

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données.

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures ne prennent pas en charge le `dataset`. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec `getAttribute()`. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`.

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

Voir aussi
----------

* Cet article est une adaptation de « Utiliser les attributs de données en JavaScript et CSS » publié sur hacks.mozilla.org (en anglais).
* Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez `SVGElement.dataset` et `data-\* (en-US)` pour davantage d'informations.
* *How to use HTML5 data attributes* (Sitepoint) (en anglais)