Atributele data-* te lasă să stochezi date personalizate, private pe orice element HTML. Ele sunt o modalitate standard de a atașa metadate la DOM pe care JavaScript le poate citi, fără a abuza de atribute non-standard sau clase.
html
Edit
Atributele data-* te lasă să stochezi date personalizate, private pe orice element HTML. Ele sunt o modalitate standard de a atașa metadate la DOM pe care JavaScript le poate citi, fără a abuza de atribute non-standard sau clase.
Edit
datasetconst 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
Două reguli cheie: data-user-role este accesat ca dataset.userRole (liniuțele se transformă în camelCase), și fiecare valoare este un șir — convertește după cum este necesar (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);
});
Stocarea id-ului pe fiecare element înseamnă că un listener pe element-ul părinte poate gestiona toate elementele.
data-* este modalitatea curată, conformă standardelor, de a trece date de server în DOM pentru JS pe partea client (fără o apel API suplimentar), pentru a configura event delegation și pentru a conduce starea CSS — fără a inventa atribute non-standard care ar face HTML-ul nevalid.
Nu stoca date mari sau sensibile acolo, totuși; sunt vizibile în marcaj.