data-* صفات آپ کو کسی بھی HTML عنصر پر custom، private ڈیٹا محفوظ کرنے دیتے ہیں۔ یہ DOM پر metadata منسلک کرنے کا ایک معیاری طریقہ ہے جو JavaScript پڑھ سکتا ہے، غیر معیاری صفات یا classes استعمال کیے بغیر۔
html
<button
=
=
=
>Edit
dataset کے ذریعے انہیں پڑھناconst 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
دو اہم قوانین: data-user-role کو dataset.userRole کے طور پر رسائی کیا جاتا ہے (dashes camelCase میں تبدیل ہو جاتے ہیں)، اور ہر قدر ایک string ہے — ضرورت کے مطابق تبدیل کریں (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);
});
ہر عنصر پر id محفوظ کرنے کا مطلب ہے کہ والد پر ایک listener تمام اشیاء کو سنبھال سکتا ہے۔
data-* صاف، معیاری طریقے سے سرور ڈیٹا کو DOM میں client-side JS کے لیے منتقل کرنے کا طریقہ ہے (بغیر اضافی API کال کے)، event delegation کے لیے، اور CSS state چلانے کے لیے — بغیر غیر معیاری صفات بنائے جو HTML کو غلط بنا دیں۔
وہاں بڑا یا حساس ڈیٹا محفوظ نہ کریں؛ یہ markup میں نظر آتا ہے۔