Wat zijn `data-*` attributen en hoe lees je ze?

Question

Accepted Answer

**`data-*` attributen** laten je custom, private data op elk HTML-element opslaan. Ze zijn een standaard manier om metadata aan de DOM te hechten die JavaScript kan lezen, zonder niet-standaard attributen of klassen te misbruiken. ```html ``` ## Waarom het belangrijk is ```js const btn = document.querySelector("button"); btn.dataset.id; // "42" btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase btn.dataset.isActive; // "true" ← always a STRING // writing updates the attribute too btn.dataset.id = "99"; // sets data-id="99" in the DOM ``` Twee belangrijke regels: `data-user-role` wordt benaderd als `dataset.userRole` (de streepjes worden camelCase), en **elke waarde is een string** — converteer indien nodig (`Number(btn.dataset.id)`, `btn.dataset.isActive === "true"`). ## Lezen in CSS ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* display the value */ ``` ## Een veelvoorkomend patroon: event delegation ```js list.addEventListener("click", (e) => { const id = e.target.dataset.id; // know which item was clicked if (id) deleteItem(id); }); ``` Het opslaan van de id op elk element betekent dat één listener op het parent element alle items kan afhandelen. ## Waarom het belangrijk is `data-*` is de schone, standaard-conforme manier om servergegevens in de DOM voor client-side JS in te voeren (zonder een extra API-aanroep), om event delegation in te stellen en om CSS-status aan te sturen — zonder niet-standaard attributen uit te vinden die de HTML ongeldig zouden maken. Sla daar echter geen grote of gevoelige gegevens op; het is zichtbaar in de markup.