Gli attributi data-* ti permettono di memorizzare dati personalizzati e privati su qualsiasi elemento HTML. Sono un modo standard per allegare metadati al DOM che JavaScript può leggere, senza abusare di attributi non standard o classi.
html
Edit
Gli attributi data-* ti permettono di memorizzare dati personalizzati e privati su qualsiasi elemento HTML. Sono un modo standard per allegare metadati al DOM che JavaScript può leggere, senza abusare di attributi non standard o classi.
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
Due regole fondamentali: data-user-role viene accessato come dataset.userRole (i trattini diventano camelCase), e ogni valore è una stringa — converti secondo necessità (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);
});
Memorizzare l'id su ogni elemento significa che un ascoltatore sul genitore può gestire tutti gli elementi.
data-* è il modo pulito e conforme agli standard per passare dati dal server al DOM per JavaScript lato client (senza una chiamata API extra), per collegare l'event delegation e per gestire lo stato CSS — senza inventare attributi non standard che renderebbero l'HTML non valido.
Non memorizzare dati grandi o sensibili lì, però; sono visibili nel markup.