Syftet med det här blogginlägget är att reda ut viss förvirring när du använder dataattributet i Javascript. Som studerande inom programvaruteknik kan bootcamp-världen och den verkliga världen ibland tyckas vara nära besläktade men ändå vara galaxer från varandra. Under en av våra föreläsningar ändrade vi klasser och lade till ids direkt i html och en student nämnde att det inte var särskilt klokt att ändra dessa saker eftersom designteamet kunde ha problem.

Detta var helt logiskt. HTMLElement.dataset. Egenskapen dataset ger JS-programmerare möjlighet att läsa/skriva anpassade attribut på ett element. Fördelen är att den är tillgänglig i DOM såväl som i HTML.

Den förvirrande delen av detta är att ett HTML-dataattribut och dess motsvarande DOM dataset.property inte har samma namn. Här är vad jag har hittat när jag har läst på MDN-webbplatsen.

Det är här som de flesta problemen uppstår. Som ny JS-programmerare tyckte jag att detta var särskilt användbart för att ställa in attribut till element och samtidigt lägga till händelselyssnare. Ett varningens ord: Jag är fortfarande student och det här kanske inte är bästa praxis, men jag gick åtminstone inte in och ändrade den befintliga HTML:n.

Så efter att ha läst igenom namngivningsreglerna för det här ämnet kan vi gå vidare med de användbara sakerna, åtkomst till och inställning av värdena, följt av några exempel.

Accessing the values in my opinion, gives us more options for manipulation, as opposed to just calling on the className or the id. Detta är kraftfullt eftersom vi inte behöver oroa oss för om designteamet kommer in en dag och säger, gissa vad, vi har bytt namn på alla våra klasser. Här är några exempel på syntaxen:

Här är ett exempel som Mozilla ger:

Och för mina medmänniskor.” Den här bör verkligen vara en riktig höjdare. Med vår parprogrammering Toyland, så här använde Alex och jag det:

Efter att ha pratat med en kompis som nu lär sig React, så kommer vi att få reda på, om du läser igenom den här koden, att .innerText är en IE-metod och att vi borde använda .textContent, men det är för ett annat inlägg.

Med den tid vi ägnar åt att lära oss nytt material glider ibland viktiga aspekter mellan stolarna. När projektveckan väl är här tror jag att vi alla kommer att bli mycket bättre på att använda dessa anpassade verktyg för att manipulera DOM och skriva ren kod. Jag hoppas att du gillade läsningen!