Los atributos data-* te permiten almacenar datos personalizados y privados en cualquier elemento HTML. Son una forma estándar de adjuntar metadatos al DOM que JavaScript puede leer, sin abusar de atributos no estándar o clases.
html
Edit
Los atributos data-* te permiten almacenar datos personalizados y privados en cualquier elemento HTML. Son una forma estándar de adjuntar metadatos al DOM que JavaScript puede leer, sin abusar de atributos no estándar o clases.
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
Dos reglas clave: data-user-role se accede como dataset.userRole (los guiones se convierten en camelCase), y cada valor es una cadena — convierte según sea necesario (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);
});
Almacenar el id en cada elemento significa que un listener en el padre puede manejar todos los elementos.
data-* es la forma limpia, conforme a los estándares, de pasar datos del servidor al DOM para JavaScript del lado del cliente (sin una llamada API adicional), para establecer event delegation, y para controlar el estado de CSS — sin inventar atributos no estándar que harían que el HTML fuera inválido.
No almacenes datos grandes o sensibles allí; son visibles en el marcado.