سمات data-* تسمح لك بتخزين بيانات مخصصة وخاصة على أي عنصر HTML. إنها طريقة قياسية لإرفاق البيانات الوصفية بـ DOM التي يمكن لـ JavaScript قراءتها، دون الإساءة إلى السمات غير القياسية أو الفئات.
html
<
=
=
=
>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
قاعدتان رئيسيتان: يتم الوصول إلى data-user-role كـ dataset.userRole (الشرطات تتحول إلى camelCase)، وكل قيمة عبارة عن سلسلة نصية — قم بالتحويل حسب الحاجة (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);
});
تخزين المعرّف على كل عنصر يعني أن مستمع واحد على الأب يمكنه التعامل مع جميع العناصر.
data-* هي الطريقة النظيفة والمتوافقة مع المعايير لنقل بيانات الخادم إلى DOM لـ JavaScript من جانب العميل (بدون استدعاء API إضافي)، لربط event delegation، ولتشغيل حالة CSS — دون اختراع سمات غير قياسية ستجعل HTML غير صالح.
لا تخزن بيانات كبيرة أو حساسة هناك؛ فهي مرئية في الترميز.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع