JavaScript - dataset

En JavaScript, l'attribut dataset est utilisé pour accéder aux attributs data-* d'un élément HTML. Ces attributs data-* permettent de stocker des informations supplémentaires sur un élément de manière standardisée, sans avoir recours à des hacks tels que l'utilisation de classes ou d'ID supplémentaires.

Voici quelques points clés concernant dataset en JavaScript :

1. Accès aux attributs data-* :

• L'attribut dataset d'un élément HTML renvoie un objet DOMStringMap. Chaque attribut data-* est accessible en tant que propriété de cet objet.
• Les noms des attributs data-* sont convertis en camelCase. Par exemple, data-example-name devient element.dataset.exampleName.

2. Lecture et écriture :

• Vous pouvez lire la valeur d'un attribut data-* en accédant à la propriété correspondante de dataset.
• Vous pouvez également modifier la valeur d'un attribut data-* en modifiant la propriété correspondante.

3. Exemple d'utilisation :

• HTML : <div id="myDiv" data-user-id="12345" data-user-name="JohnDoe"></div>

• JavaScript :

  ​​​​let div = document.getElementById('myDiv');
  ​​​​console.log(div.dataset.userId); // Affiche "12345"
  ​​​​console.log(div.dataset.userName); // Affiche "JohnDoe"
  
  ​​​​// Modification des valeurs
  ​​​​div.dataset.userId = '67890';
  ​​​​console.log(div.dataset.userId); // Affiche "67890"
  

4. Utilisations courantes :

• Les attributs data-* sont souvent utilisés pour stocker des informations supplémentaires nécessaires pour le JavaScript, sans polluer le balisage HTML avec des données non standard.
• Ils sont particulièrement utiles dans les bibliothèques et frameworks JavaScript, ainsi que pour les interactions avec le DOM, comme dans les cas de manipulation dynamique des éléments.

5. Compatibilité :

• dataset est largement supporté dans les navigateurs modernes, mais il peut ne pas être disponible dans les anciennes versions d'Internet Explorer (IE10 et versions antérieures).

6. Sécurité :

• Comme pour toute interaction avec le contenu du DOM, il est important de valider et de nettoyer les données obtenues via dataset pour éviter les failles de sécurité, telles que les attaques de type cross-site scripting (XSS).

En résumé, dataset est un outil puissant pour travailler avec des données personnalisées dans le DOM, permettant une manipulation plus propre et plus lisible des données au sein du HTML.