Le but de ce billet de blog est de dissiper une certaine confusion lors de l’utilisation de l’attribut data en Javascript. En tant qu’étudiant en génie logiciel, parfois le monde du bootcamp et le monde réel semblent étroitement liés et pourtant séparés par des galaxies. Pendant l’un de nos cours, nous modifions des classes et ajoutons des ids au html directement et un étudiant a mentionné qu’il n’était pas particulièrement sage de modifier ces choses parce que l’équipe de conception pourrait avoir des problèmes.

Cela avait tout son sens. Entrez, HTMLElement.dataset. La propriété dataset fournit aux programmeurs JS la possibilité de lire/écrire des attributs personnalisés sur un élément. L’avantage est que c’est accessible dans le DOM ainsi que dans le HTML.

La partie déroutante de ceci est qu’un attribut de données HTML et sa propriété dataset.DOM correspondante ne partagent pas le même nom. Voici ce que j’ai trouvé en lisant sur le site MDN.

C’est là que la plupart des problèmes se posent. En tant que nouveau programmeur JS, j’ai pensé que cela serait particulièrement utile pour définir les attributs des éléments tout en ajoutant des écouteurs d’événements. Un mot d’avertissement : Je suis encore un étudiant et ce n’est peut-être pas la meilleure pratique, mais au moins je n’allais pas modifier le HTML existant.

Donc, après avoir lu les règles de nommage pour ce sujet, nous pouvons ensuite passer aux choses utiles, accéder et définir les valeurs, suivies de quelques exemples.

Accéder aux valeurs à mon avis, nous donne plus d’options pour la manipulation, par opposition à l’appel sur le className ou l’id. C’est puissant car nous n’avons pas à nous inquiéter de savoir si l’équipe de conception va arriver un jour et dire, devinez quoi, nous avons renommé toutes nos classes. Voici quelques exemples de la syntaxe:

Voici un exemple que Mozilla donne :

Et pour mes camarades de cohorte « mates. » Celui-ci devrait vraiment faire mouche. Avec notre programmation en binôme Toyland, voici comment Alex et moi l’avons utilisé :

Après avoir parlé avec un ami qui apprend maintenant React, ce que nous viendrons à découvrir, si vous lisez ce code, c’est que .innerText est une méthode IE, et que nous devrions utiliser .textContent, mais c’est pour un autre post.

Avec le temps que nous passons à apprendre du nouveau matériel, parfois des aspects importants passent à travers les mailles du filet. Une fois que la semaine du projet sera là, je crois que nous deviendrons tous bien meilleurs dans l’utilisation de ces outils personnalisés pour manipuler le DOM et écrire du code propre. J’espère que vous avez apprécié cette lecture!