الوصول إلى data-* باستخدام dataset في JavaScript
قراءة سمات data المخصصة وكتابتها عبر dataset API
الوصول إلى data-* باستخدام dataset في JavaScript درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما هي واجهة dataset البرمجية؟
يعرِض كل عنصر HTML سمات data-* الخاصة به عبر الخاصية dataset — وهي DOMStringMap تربط أسماء السمات بقيمها من دون الحاجة إلى استدعاءات getAttribute().
الربط بين السمة والخاصية
تصبح data-user-id هي el.dataset.userId. وتتحول الشرطات في أسماء السمات إلى camelCase في خاصية dataset. أما الوصول إلى data-item-count فيتم باستخدام el.dataset.itemCount.
قراءة القيم
اقرأ سمة بيانات باستخدام: const id = el.dataset.userId. جميع قيم dataset سلاسل نصية — حوّل القيم الرقمية باستخدام Number() أو parseInt() عند الحاجة. تعيد السمات غير المعرّفة undefined، وليس null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);كتابة القيم
عيّن سمة بيانات عبر dataset: el.dataset.state = "active". ينشئ ذلك سمة HTML باسم data-state أو يحدّثها. ينعكس تغيير السمة في DOM فورًا، ويمكن مراقبته باستخدام MutationObserver.
حذف القيم
احذف سمة بيانات باستخدام: delete el.dataset.userId. تُزال سمة data-user-id المقابلة من العنصر. ويمكنك أيضًا استخدام el.removeAttribute("data-user-id") للحذف الصريح.
التكرار على dataset
dataset هي DOMStringMap — يمكنك التكرار عليها باستخدام حلقة for...in أو نشرها داخل Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). يفيد ذلك في قراءة جميع سمات البيانات على عنصر دفعةً واحدة.
استخدام dataset لحالة المكوّن
خزّن حالة المكوّن الخفيفة في سمات البيانات بدلًا من حقول الإدخال المخفية أو متغيرات JavaScript. يخزّن مكوّن علامات التبويب فهرس علامة التبويب النشطة في data-active-tab على الحاوية، ويمكن لأي نص برمجي قراءته من دون متغير مشترك.
تفويض الأحداث باستخدام dataset
في قائمة من العناصر، أرفق مستمع نقر واحدًا بالحاوية. عند النقر، اقرأ dataset للعنصر المستهدف: e.target.closest("[data-id]").dataset.id. يتولى مستمع واحد معالجة جميع العناصر من دون تكلفة ربط مستمع بكل عنصر.
dataset مقابل الخصائص المخصّصة
استخدم dataset للبيانات التي يجب أن تكون قابلة للقراءة من HTML، مثل البيانات الوصفية المُصيّرة على الخادم والمتاحة لمحددات CSS. واستخدم متغيرات JavaScript لحالة التشغيل المؤقتة التي لا تحتاج إلى الظهور في HTML. يؤدي خلط الأسلوبين إلى تعقيد غير ضروري.
تنبيه بشأن تحويل الأنواع
يعيد dataset سلاسل نصية دائمًا. تكون el.dataset.active === true خاطئة دائمًا — قارن باستخدام el.dataset.active === "true" أو حوّل القيمة: el.dataset.active === "true". تتطلب الحالة المنطقية المخزّنة في dataset المقارنة كسلسلة نصية.
dataset مقابل getAttribute
يقرأ كلاهما سمات البيانات. يوفر dataset وصولًا أكثر سهولة باستخدام camelCase، بينما يتطلب getAttribute اسم السمة الكامل، بما في ذلك البادئة «data-». فضّل dataset في الشيفرة الحديثة؛ واستخدم getAttribute عند التكرار على سمات غير البيانات إلى جانب سمات البيانات.
تحقق من المعرفة
كيف تظهر سمة HTML المسماة data-user-id في كائن dataset في JavaScript؟
الملخص
تربط واجهة dataset سمات data-* بخصائص JavaScript بصيغة camelCase، ما يسهّل قراءتها وكتابتها وحذفها. وتتيح تخزين حالة المكوّن، وأنماط تفويض الأحداث، وتمرير البيانات من الخادم إلى العميل من دون حقول إدخال مخفية أو متغيرات عامة.
الأسئلة الشائعة
هل درس «الوصول إلى data-* باستخدام dataset في JavaScript» مجاني؟
نعم — نص درس «الوصول إلى data-* باستخدام dataset في JavaScript» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «الوصول إلى data-* باستخدام dataset في JavaScript»؟
قراءة سمات data المخصصة وكتابتها عبر dataset API تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الوصول إلى data-* باستخدام dataset في JavaScript»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صياغة data-* واصطلاحات التسمية
- الوصول إلى data-* باستخدام dataset في JavaScript
- استخدام data-* مع محددات السمات في CSS
- أنماط عملية: التلميحات وتتبع الحالة