Le dataset, c'est ben pratique
Je porte mon dévolu dans ce billet sur la propriété dataset des éléments d'une page web. C'est vraiment fou ce qu'on peut faire avec ça!
Je porterai en exemple une page de réservations de voyages à New York que j'ai fait pour mon employeur, Tours Amérique. Voici ladite page. Ouvrez-y la console et explorez le formulaire de réservation du premier circuit proposé.
Dans cette page, j'ai monté des formulaires de réservation qui se servent abondamment des datasets. Je me sers principalement du JSON pour stocker mon information.
Chaque balise <select> contient des <option> qui ont évidemment un attribut value, mais aussi un attribut data-json qui permet de changer le contenu de choix de réponse des autres champs. Par exemple, une seule option du champ "En date du", pour choisir la date de départ, contient les points de départ disponibles, ainsi que le nombre de places et de chambres qui y sont disponibles. Ainsi, s'il ne reste que deux places dans l'autocar du 25 juin pour New York, le choix du nombre de passagers sera limité à deux; soit deux adultes, soit un adulte et un enfant.
Alors que dans le HTML l'attribut porte le nom de data-quelque-chose, dans le JavaScript, on interrogera ou modifiera l'attribut avec la propriété element.dataset.quelqueChose (ou element.dataset['quelqueChose']).
La seule limite est pour le type de données, qui soit être une chaîne de caractères. Mais il ne semble pas y avoir de limite de longueur de chaîne. Bon, évidement, y mettre un gigaoctet de données, c'est un peu, comme disait mon père, «courir après le trouble».
Par la suite, on peut même se servir des attributs data- pour aller les retrouver avec un sélecteur :
const el = document.querySelector("div[data-ouvert]");
Les attributs data- permettent aussi d'identifier une ligne sans se soucier de l'unicité à toute la page, requise par l'attribut id :
<table> <tr data-id='1'><td>Numéro 1</td></tr> <tr data-id='2'><td>Numéro 2</td></tr> </table>