ما هي سمات data-* وكيف تقرأها؟

Question

Accepted Answer

سمات **`data-*`** تسمح لك بتخزين بيانات مخصصة وخاصة على أي عنصر HTML. إنها طريقة قياسية لإرفاق البيانات الوصفية بـ DOM التي يمكن لـ JavaScript قراءتها، دون الإساءة إلى السمات غير القياسية أو الفئات. ```html ``` ## قراءتها في JavaScript عبر `dataset` ```js 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` (الشرطات تتحول إلى camelCase)، و**كل قيمة عبارة عن سلسلة نصية** — قم بالتحويل حسب الحاجة (`Number(btn.dataset.id)`, `btn.dataset.isActive === "true"`). ## القراءة في CSS ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* display the value */ ``` ## نمط شائع: event delegation ```js 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 غير صالح. لا تخزن بيانات كبيرة أو حساسة هناك؛ فهي مرئية في الترميز.