Het doel van deze blog post is om wat verwarring op te helderen bij het gebruik van het data-attribuut in Javascript. Als een software engineering student, lijken de bootcamp wereld en de echte wereld soms nauw verwant, maar toch sterrenstelsels van elkaar verwijderd. Tijdens een van onze colleges waren we bezig met het aanpassen van classes en het direct toevoegen van id’s aan html en een student zei dat het niet zo verstandig was om dit aan te passen omdat het design team er problemen mee zou kunnen krijgen. Enter, HTMLElement.dataset. De dataset eigenschap biedt JS programmeurs de mogelijkheid om aangepaste attributen op een element te lezen/schrijven. Het voordeel is dat het zowel in het DOM als in HTML toegankelijk is.

Het verwarrende hieraan is dat een HTML data-attribuut en de bijbehorende DOM dataset.property niet dezelfde naam hebben. Dit is wat ik heb gevonden tijdens het lezen op de MDN-website.

Dit is waar de meeste problemen ontstaan. Als nieuwe JS-programmeur vond ik dit vooral handig voor het instellen van attributen op elementen terwijl je event listeners toevoegt. Een woord van voorzichtigheid: Ik ben nog een student en dit is misschien niet de beste werkwijze, maar ik ging er in ieder geval niet op in en wijzigde de bestaande HTML.

Dus na het doorlezen van de naamgevingsregels voor dit onderwerp, kunnen we verder met het nuttige spul, het benaderen en instellen van de waarden, gevolgd door enkele voorbeelden.

Het benaderen van de waarden geeft ons naar mijn mening meer mogelijkheden voor manipulatie, in tegenstelling tot het alleen aanroepen van de className of het id. Dit is krachtig omdat we ons geen zorgen hoeven te maken of het ontwerpteam op een dag al dan niet zal binnenkomen en zeggen, raad eens, we hebben al onze klassen een nieuwe naam gegeven. Hier zijn enkele voorbeelden van de syntax:

Hier is een voorbeeld dat Mozilla geeft:

En voor mijn mede cohort “maatjes.” Deze moet je echt raken. Met onze pair programming Toyland, dit is hoe Alex en ik het gebruikten:

Na een gesprek met een vriend die nu React aan het leren is, wat we te weten komen, als je deze code doorleest, is dat .innerText een IE-methode is, en dat we .textContent zouden moeten gebruiken, maar dat is voor een andere post.

Met de hoeveelheid tijd die we besteden aan het leren van nieuw materiaal, glippen er soms belangrijke aspecten door de mazen van het net. Als het eenmaal project week is, denk ik dat we allemaal veel beter zullen worden in het gebruik van deze aangepaste tools om de DOM te manipuleren en schone code te schrijven. Ik hoop dat je het leuk vond om te lezen!