HTMLElement.dataset

La propriété HTMLElement.dataset fournit un accès en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément. C'est un tableau associatif de DOMString, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.

Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (:), tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).

Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la DOMStringMap avec les règles suivantes :

  • le préfixe data- est enlevé (y compris le tiret) ;
  • pour tout tiret (U+002D) suivi par une  lettre minuscule ASCII a à z, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;
  • les autres caractères (y compris les autres tirets) ne sont pas modifiés.

La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :

  • Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII a à z (avant la transformation) ;
  • un préfixe data- est ajouté ;
  • toute lettre majuscule ASCII A à Z est transformée en un tiret suivi de la minuscule correspondante ;
  • les autres caractères ne sont pas modifiés.

La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.

Par exemple, l'attribut nommé data-abc-def correspond à la clef abcDef.

Syntaxe

chaîne = element.dataset.nomEnCamelCase;
element.dataset.nomEnCamelCase = chaîne;

Exemples

<div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance>Monsieur Tartempion
</div>

var el = document.querySelector('#utilisateur');

// el.id == 'utilisateur'
// el.dataset.id === '1234567890'
// el.dataset.utilisateur === 'Monsieur Tartempion'
// el.dataset.dateDeNaissance === ''

el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.

// 'unAttributDeDonnees' in el.dataset === false

el.dataset.unAttributDeDonnees = 'mes données';
// 'unAttributDeDonnees' in el.dataset === true

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'HTMLElement.dataset' dans cette spécification.
Standard évolutif Pas de changement depuis le dernier instantané (snapshot), HTML 5.1
HTML 5.1
La définition de 'HTMLElement.dataset' dans cette spécification.
Recommendation Instantané de HTML Living Standard, pas de changement depuis HTML5
HTML5
La définition de 'HTMLElement.dataset' dans cette spécification.
Recommendation Instantané de HTML Living Standard, définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
datasetChrome Support complet 8Edge Support complet 12Firefox Support complet 6IE Support complet 11Opera Support complet 11Safari Support complet 10WebView Android Support complet 4.4Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

  • La classe des attributs globaux HTML data-*.