Propriété : HTMLElement.dataset

Liste de l'ensemble des attributs data-* présents dans la balise HTML d'un élément du DOM

Syntaxe
JSON element.dataset

Compatible tous navigateurs

Oui

Description
Liste des attributs de type data-* d'un objet HTMLElement qui sont présents dans sa balise HTML.

L'objet au format JSON dataset est accessible en écriture : modifier cet objet a un effet automatique et immédiat sur le DOM.

Pour rappel les attributs commençant par data- permettent de stocker des informations texte sur chaque élément du DOM.
Même si l'attribut n'existe pas dans la norme HTML W3C, aucune erreur n'est reportée lors de l'exercice de validation de code.

Exemple 1 : Utilisation de dataset

Code source

<div id="myDiv" data-tjs1="info numero 1" data-tjs2="info 2">Mon div avec 2 attributs data-*</div>

<script>
var div=document.getElementById("myDiv");
console.log(div.dataset);

// Accès en lecture
console.log(div.dataset.tjs1);

// Accès en écriture
div.dataset.tjs2="Nouvelle valeur affectée par le dataset";
console.log(div.dataset.tjs2);
</script>

Résultat

Mon div avec 2 attributs data-*

Emulation de la console

Explication

La propriété dataset permet d'accéder très facilement aux attributs avec la notation objet.

Page en rapport
Introduction au DHTML

Page mise à jour le 29/07/2018

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Propriété : HTMLElement.dataset

Liste de l'ensemble des attributs data-* présents dans la balise HTML d'un élément du DOM

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...