Data Attributes

Intro

  • JavaScript werkt nauw samen met HTML om webpagina’s interactief te maken
  • Soms willen we extra data aan HTML-elementen toevoegen zonder nieuwe id’s of class-namen te gebruiken.

 

​➡️ Oplossing: Data-attributes! 🎉

Wat zijn data attributes?

Data attributes

  • Data-attributes zijn custom HTML-attributen
  • Beginnen met data- gevolgd door een naam naar keuze
  • Je kan ze aan eender welk HTML element toevoegen en kan er meerdere gebruiken
  • Slaan informatie op die JavaScript kan uitlezen
  • Handig voor kleine stukjes informatie, zonder een database of API te moeten koppelen
<button data-product-id="tshirt-21" data-category="shirts" data-stock="true">
  Voeg toe aan winkelmandje
</button>

Data attributes

data-a-custom-name="some value"

name

Het attribuut start met 'data-'. Daarna volgt een naam naar keuze in kebab-case.

value

De waarde, in de vorm van een string.

Data attributes gebruiken

Uitlezen

  1. Haal het element op uit de DOM
  2. Gebruik .dataset gevolgd door een punt . en de naam van het data-attribuut in camelCase 
<button data-product-id="tshirt-21" data-category="shirts" data-stock="true">
  Voeg toe aan winkelmandje
</button>

index.html

const button = document.querySelector("button");
console.log(button.dataset.productId);  // "tshirt-21"
console.log(button.dataset.category);   // "shirts"
console.log(button.dataset.stock);      // "true" (string!)

main.js

Aanpassen

  • Gebruik de property .dataset gevolgd door een punt . en de naam van het data-attribuut
<button data-product-id="tshirt-21" data-category="shirts" data-stock="true">
  Voeg toe aan winkelmandje
</button>

index.html

button.dataset.productId = "broek-123";

main.js

<button data-product-id="broek-123" data-category="shirts" data-stock="true">
  Voeg toe aan winkelmandje
</button>

Gewijzigde DOM

Verwijderen

  • Gebruik het keyword delete gevolgd door het attribute
<button data-product-id="tshirt-21" data-category="shirts" data-stock="true">
  Voeg toe aan winkelmandje
</button>

index.html

delete button.dataset.category;

main.js

<button data-product-id="broek-123" data-stock="true">
  Voeg toe aan winkelmandje
</button>

Gewijzigde DOM

Typecasing

Data attribute types wijzigen

  • De waarde van een data attribute is altijd een string
    • ⚠️ getallen of booleans worden dus altijd uitgelezen als een string​
  • Type casting = het data type veranderen
  • Data type verandert in HTML niet automatisch 

Booleans

✅ Kan je handmatig omzetten met JSON.parse()

console.log(button.dataset.stock);  		// "true" (string!)
console.log(button.dataset.stock === true); // false 😱

const isInStock = JSON.parse(button.dataset.stock);
console.log(isInStock); // true (nu een echte boolean)

Numbers

✅ Kan je handmatig omzetten met Number()

button.dataset.productId = "123";
console.log(button.dataset.productId + 1); // "1231" (string!)
const productId = Number(button.dataset.productId);
console.log(productId + 1); // 124