Attribute data-* cho phép bạn lưu trữ dữ liệu tùy chỉnh, riêng tư trên bất kỳ HTML element nào. Đó là cách chuẩn để gắn metadata vào DOM mà JavaScript có thể đọc, mà không lạm dụng các attribute không chuẩn hoặc class.
html
Edit
datasetconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case trở thành camelCase
btn.dataset.isActive; // "true" ← luôn là một STRING
// ghi cũng cập nhật attribute
btn.dataset.id = "99"; // đặt data-id="99" trong DOM
Hai quy tắc then chốt: data-user-role được truy cập là dataset.userRole (các dấu gạch ngang chuyển thành camelCase), và mọi giá trị là một string — chuyển đổi khi cần (Number(btn.dataset.id), btn.dataset.isActive === "true").
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* hiển thị giá trị */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // biết item nào được click
if (id) deleteItem(id);
});
Lưu id trên mỗi element nghĩa là một listener duy nhất trên phần tử cha có thể xử lý tất cả các item.
data-* là cách sạch sẽ, tuân thủ chuẩn để truyền dữ liệu từ server vào DOM cho JS phía client (không cần thêm một API call), để gắn event delegation, và để điều khiển trạng thái CSS — mà không phải bịa ra các attribute không chuẩn làm HTML không hợp lệ.
Tuy nhiên đừng lưu dữ liệu lớn hoặc nhạy cảm ở đó; nó hiển thị ngay trong markup.