Atributos data-* permitem que você armazene dados personalizados e privados em qualquer elemento HTML. Eles são uma forma padrão de anexar metadados ao DOM que o JavaScript pode ler, sem abusing atributos não-padrão ou classes.
html
Edit
Atributos data-* permitem que você armazene dados personalizados e privados em qualquer elemento HTML. Eles são uma forma padrão de anexar metadados ao DOM que o JavaScript pode ler, sem abusing atributos não-padrão ou classes.
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
Duas regras-chave: data-user-role é acessado como dataset.userRole (os hífens se tornam camelCase), e todo valor é uma string — converta conforme necessário (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);
});
Armazenar o id em cada elemento significa que um ouvinte no elemento pai pode lidar com todos os itens.
data-* é a forma limpa, compatível com padrões, de passar dados do servidor para o DOM para JS do lado do cliente (sem uma chamada de API extra), configurar delegação de eventos e conduzir o estado do CSS — sem inventar atributos não-padrão que tornariam o HTML inválido.
Não armazene dados grandes ou confidenciais lá, porém; eles estão visíveis na marcação.