Atributet data-* të lejojnë të ruash të dhëna të personalizuara, private në çdo element HTML. Ato janë një mënyrë standarde për të bashkangjitur metapërshkrime te DOM-i që JavaScript mund të lexojë, pa abuzuar atributet jo-standarde ose klasa.
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
Dy rregulla kyçe: data-user-role akcesohet si dataset.userRole (pauza shndërrohet në camelCase), dhe çdo vlerë është një string — konverto sipas nevojës (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);
});
Ruajtja e id-it në secilin element do të thotë që një dëgjues në prind mund të trajtojë të gjithë artikujt.
data-* është mënyra e pastër, në përputhje me standarden për të kaluar të dhëna nga serveri në DOM për JS në anën e klientit (pa një apel shtesë API), për të konfiguruar delegimin e ngjarjeve dhe për të drejtuar gjendjen CSS — pa shpikur atribute jo-standarde që do ta bënin HTML-in të pavlefshëm.
Mos ruaj të dhëna të mëdha ose të ndjeshme atje; ato janë të dukshme në markup.