data-* attribuutit antavat sinulle mahdollisuuden tallentaa mukautettuja, yksityisiä tietoja mihin tahansa HTML-elementtiin. Ne ovat vakiomuotoinen tapa liittää metatietoja DOM:iin, jonka JavaScript voi lukea, ilman epästandardi-attribuuttien tai luokkien väärinkäyttöä.
Edit
dataset-kauttaconst 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
Kaksi tärkeää sääntöä: data-user-role käytetään muodossa dataset.userRole (väliviivat muuttuvat camelCase:ksi), ja jokainen arvo on merkkijono — muunna tarpeen mukaan (Number(btn.dataset.id), btn.dataset.isActive === "true").
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
Id:n tallentaminen jokaiselle elementille tarkoittaa, että yksi kuuntelija vanhempiessa voi käsitellä kaikki kohteet.
data-* on siisti, standardien mukainen tapa siirtää palvelimen tiedot DOM:iin asiakaspuolen JavaScript:ille (ilman ylimääräistä API-kutsua), event delegaation kytkeytymiseen ja CSS-tilan ohjaukseen — ilman epästandardi-attribuuttien keksimistä, jotka tekisivät HTML:n virheelliseksi.
Älä tallenna sinne suuria tai arkaluonteisia tietoja; ne näkyvät merkinnässä.