Atribut data-* memungkinkan Anda menyimpan data khusus dan pribadi pada elemen HTML apa pun. Ini adalah cara standar untuk melampirkan metadata ke DOM yang dapat dibaca JavaScript, tanpa menyalahgunakan atribut non-standar atau kelas.
html
Edit
Atribut data-* memungkinkan Anda menyimpan data khusus dan pribadi pada elemen HTML apa pun. Ini adalah cara standar untuk melampirkan metadata ke DOM yang dapat dibaca JavaScript, tanpa menyalahgunakan atribut non-standar atau kelas.
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
Dua aturan kunci: data-user-role diakses sebagai dataset.userRole (garis hubung berubah menjadi camelCase), dan setiap nilai adalah string — konversi sesuai kebutuhan (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);
});
Menyimpan id pada setiap elemen berarti satu pendengar pada induk dapat menangani semua item.
data-* adalah cara yang bersih dan sesuai standar untuk meneruskan data server ke DOM untuk JavaScript sisi klien (tanpa panggilan API tambahan), untuk menghubungkan delegasi peristiwa, dan untuk mendorong status CSS — tanpa menemukan atribut non-standar yang akan membuat HTML tidak valid.
Namun, jangan simpan data besar atau sensitif di sana; itu terlihat dalam markup.