Les attributs de données personnalisés (data-\*) sont utilisés pour stocker des données personnalisées privées sur une page ou une application. Ces attributs vous permettent de stocker des informations supplémentaires sur une balise HTML standard sans avoir à utiliser des balises non standard.
Pour utiliser un attribut de données personnalisé, vous le préfixez par “data-” et ensuite vous ajoutez un mot qui représente votre donnée.
Par exemple, si vous voulez stocker une information supplémentaire pour un élément audio, vous pouvez faire ce qui suit:
```
```
Dans cet exemple, “data-album” et “data-artist” sont des attributs de données personnalisés.
Ensuite, vous pouvez utiliser JavaScript pour manipuler ces données. Pour obtenir la valeur d’un attribut de données personnalisé, vous pouvez utiliser la méthode `getAttribute`.
Par exemple:
```
var audio = document.querySelector(‘audio’);
var artist = audio.getAttribute(‘data-artist’);
console.log(artist); // Mon artiste favori
```
Pour définir la valeur d’un attribut de données personnalisé, vous pouvez utiliser la méthode `setAttribute`.
Par exemple:
```
audio.setAttribute(‘data-artist’, ‘Un autre artiste’);
```
Depuis la sortie de HTML5, vous pouvez également utiliser la propriété `dataset` pour accéder aux attributs de données personnalisés.
Par exemple:
```
var artist = audio.dataset.artist;
```
À noter que lorsque vous utilisez la propriété `dataset`, les attributs de données personnalisés sont convertis en camelCase. Ainsi, l’attribut “data-my-attribute” devient `myAttribute` lorsque vous y accédez avec `dataset.myAttribute`.
