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

Compatibilité des navigateurs

Voir aussi

• La classe des attributs globaux HTML data-*.