سؤال في جافاسكربت حول السمة data

• تم تصميم HTML مع مراعاة القابلية للتوسعة للبيانات التي يجب أن ترتبط بعنصر معين ولكن لا يلزم أن يكون لها أي معنى محدد. تسمح لنا سمات data- * بتخزين معلومات إضافية حول عناصر HTML القياسية والدلالات دون الاختراقات الأخرى مثل السمات غير القياسية أو الخصائص الإضافية على DOM.
• بناء syntax بسيط. أي سمة على أي عنصر يبدأ اسم السمة ب data- هي سمة بيانات. لنفترض أن لديك مقالًا وتريد تخزين بعض المعلومات الإضافية التي لا تحتوي على أي تمثيل مرئي. فقط استخدم سمات البيانات لذلك:

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>

• الوصول من javascript 

قراءة قيم هذه السمات في JavaScript بسيطة للغاية أيضًا. يمكنك استخدام getAttribute () مع اسم HTML الكامل لقراءتها ، لكن المعيار يحدد طريقة أبسط: DOMStringMap يمكنك قراءته عبر خاصية مجموعة البيانات.

للحصول على سمة بيانات من خلال كائن مجموعة البيانات ، احصل على الخاصية بجزء من اسم السمة بعد " data- " (لاحظ أنه يتم تحويل الشرطات إلى camelCase).

const article = document.querySelector("#electric-cars");
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

تفحص أكثر

 https://wiki.hsoub.com/CSS/attr

https://wiki.hsoub.com/HTML

يوجد في الجافا سكربت attribute يسمى *-data وفي هذا attribute يمكننا تخزين البيانات لتعامل معها في شيقرات الجافا سكربت أنا بخصوص color بنحن بعد هذا attribute يمكننا إضافة أي كلمة توحي على نوع البيانات التي سوف يتم تخزينها . لذلك أصبح attribute باسم data-color وفيه سوف يتم حفظ اللون .

يمكنك البحث في جوجل عن  *-data وسوف تظهر لك عدّة نتائج بحث يمكنك قراءة المزيد حول attribute .