سمات البيانات في HTML: اقرأها وعدّلها عبر dataset

الخلاصة السريعة

حوّل الاسم قبل القراءة

يتحول data-user-id إلى userId: تزال البادئة، وتُحذف الشرطة قبل الحرف اللاتيني الصغير مع تكبيره. [1]

احفظ العنصر التالي، ثم نفّذ JavaScript بعده داخل script. استعمل المفتاح userId في صيغتي النقطة والأقواس؛ لا تضع الاسم الكامل data-user-id داخل dataset. [1]

التحويل خاص بشرطة يتبعها حرف من a إلى z؛ لا يعني إزالة كل شرطة مهما كان الحرف التالي. اختيار أسماء بسيطة بكلمات لاتينية صغيرة يجعل الربط أوضح. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

<div id="card" data-user-id="24">بطاقة تجريبية</div>

مرّر الشيفرة أفقيًا عند الحاجة.

const card = document.querySelector("#card");
console.log(card.dataset.userId); // "24"
console.log(card.dataset["userId"]); // "24"

اكتب القيمة وافحص نوعها

قيم dataset نصوص؛ إسناد العدد 27 يجعل قيمة السمة النص 27، ولا يحتفظ بنوع العدد. [2]

أكمل على البطاقة نفسها. اقرأ القيمة مرة عبر dataset، ومرة عبر getAttribute باسم السمة الكامل: الطريقتان تقرآن السمة ذاتها. افحص typeof لتفرق بين شكل الرقم ونوع القيمة المخزنة. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

card.dataset.userId = 27;
console.log(card.dataset.userId); // "27"
console.log(typeof card.dataset.userId); // "string"
console.log(card.getAttribute("data-user-id")); // "27"

احذف السمة بدل إفراغها

حذف مفتاح dataset يحذف سمة البيانات المقابلة من العنصر؛ إسناد نص فارغ يبقي السمة موجودة. [3]

نفّذ السطر الأول وحده وافحص العنصر في أدوات المطور: يبقى data-user-id بقيمة فارغة. ثم نفّذ delete وافحصه ثانية؛ يختفي اسم السمة نفسه، ويبقى العنصر ونصه. [3]

تربط واجهة DOMStringMap المفتاح بالعنصر، وتحوّل userId إلى data-user-id عند الحذف. العملية تعدّل سمات البطاقة الحالية؛ ليست حذفًا لعنصر البطاقة ولا لملف HTML المحفوظ على القرص. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

card.dataset.userId = "";
delete card.dataset.userId;

افصل بيانات الشيفرة عن النص المرئي

استخدمها لبيانات تطبيقك عند غياب سمة أنسب، وأبقِ المحتوى اللازم للزائر ظاهرًا. [2] [3]

اسم البطاقة ظاهر بين الوسمين، بينما المعرّف معلومة للشيفرة. إن احتاج المستخدم إلى قراءة المعرّف، أضفه إلى محتوى ظاهر؛ فقد لا تصل التقنيات المساعدة إلى قيم سمات البيانات. [2]

اختر سمات البيانات لبيانات تطبيقك التي لا توجد لها سمة أو عناصر أنسب. لا يستنتج المتصفح وظيفة خاصة من اسم اخترعته، ولا تصبح هذه البيانات معيارًا عامًا لتبادل المعلومات بين التطبيقات. [3]