Sigtet med dette blogindlæg er at opklare noget forvirring ved brug af data-attributten i Javascript. Som softwareingeniørstuderende synes bootcamp-verdenen og den virkelige verden nogle gange at være nært beslægtet, men alligevel galakser fra hinanden. Under en af vores forelæsninger ændrede vi klasser og tilføjede id’er direkte til html, og en studerende nævnte, at det ikke var særlig klogt at ændre disse ting, fordi designteamet kunne have problemer.

Dette gav fuldstændig mening. Indtast, HTMLElement.dataset. Ejendommen dataset giver JS-programmører mulighed for at læse/skrive brugerdefinerede attributter på et element. Fordelen er, at den er tilgængelig i DOM såvel som i HTML.

Den forvirrende del af dette er, at en HTML-data-attribut og dens tilsvarende DOM dataset.property ikke har samme navn. Her er, hvad jeg har fundet, mens jeg læste op på MDN-webstedet.

Det er her, de fleste af problemerne opstår. Som ny JS-programmør syntes jeg, at dette især var nyttigt til at indstille attributter til elementer, mens jeg tilføjede event listeners. Et advarselsord: Jeg er stadig studerende, og dette er måske ikke bedste praksis, men i det mindste gik jeg ikke ind og ændrede den eksisterende HTML.

Så efter at have læst navnereglerne for dette emne igennem, kan vi så gå videre med de nyttige ting, adgang til og indstilling af værdierne, efterfulgt af nogle eksempler.

Accessing the values in my opinion, giver os flere muligheder for manipulation, i modsætning til blot at kalde på className eller id. Dette er kraftfuldt, fordi vi ikke behøver at bekymre os om, hvorvidt designteamet kommer ind en dag og siger, gæt engang, vi har omdøbt alle vores klasser. Her er nogle eksempler på syntaksen:

Her er et eksempel, som Mozilla giver:

Og til mine medister fra kohorten: “Mates”.” Denne her burde virkelig ramme plet. Med vores parprogrammering Toyland, er det sådan her Alex og jeg brugte det:

Efter at have snakket med en ven, som nu er ved at lære React, er det vi kommer frem til, hvis du læser denne kode igennem, at .innerText er en IE-metode, og vi burde bruge .textContent, men det er til et andet indlæg.

Med den mængde tid vi bruger på at lære nyt materiale, glider vigtige aspekter nogle gange igennem. Når projektugen kommer, tror jeg, at vi alle vil blive meget bedre til at udnytte disse tilpassede værktøjer til at manipulere DOM’en og skrive ren kode. Jeg håber, at du nød læsningen!