HTMLElement.dataset

La propriété HTMLElement.dataset fourni 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

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Voir aussi

• La classe des attributs globaux HTML data-*.