ستشرح هذه المقالة استخدام سمات البيانات في JavaScript.
كيفية استخدام سمات البيانات في جافا سكريبت؟
في جافا سكريبت، ' بيانات تُستخدم السمات لتخزين معلومات إضافية لا يتم عرضها على صفحة الويب. يمكن كتابة هذه المعلومات والوصول إليها وقراءتها وتغييرها ديناميكيًا وفقًا لمتطلبات المستخدم. قام هذا القسم بتنفيذ المهمة التي تمت مناقشتها عمليًا على سمات البيانات.
بناء الجملة
< بيانات العنصر -*= 'قيمة ما' >
في بناء الجملة أعلاه:
- ' عنصر يمثل عنصر HTML الذي يتم فيه استخدام سمة البيانات.
- ' بيانات-* 'يشير إلى سمات البيانات المتعددة (*) التي تبدأ بالبادئة (بيانات-)، أي الكلمة الأساسية للبيانات متبوعة بواصلة.
- بعض القيمة: ويحدد قيمة سمة البيانات.
الآن، استخدم بناء الجملة أعلاه لإنشاء سمة بيانات.
إنشاء سمات البيانات
< معرف القسم = 'myDiv' بيانات - اسم = 'ألفين' بيانات - عمر = '40' بيانات - جنس = 'ذكر' >< شعبة >يقوم كود HTML المكون من سطر واحد بإنشاء ما يلي ' اسم البيانات '،' عصر البيانات '، و ال ' بيانات الجنس 'السمات الموجودة داخل عنصر 'div' الذي يكون معرّفه 'myDiv'.
دعونا نقرأ/نصل إلى سمات البيانات التي تم إنشاؤها.
المثال 1: قراءة/الوصول إلى سمة البيانات باستخدام خاصية 'مجموعة البيانات'.
يطبق هذا المثال خاصية 'مجموعة البيانات' لقراءة/الوصول إلى سمات البيانات المحددة أو جميعها.
أولاً، انظر إلى ' زر 'العنصر الذي يستدعي' شبسفونك () 'عندما يرتبط' عند النقر يتم تشغيل الحدث عند النقر على الزر:
< زر عند النقر = 'جسفونك ()' > سمة بيانات الوصول زر >انتقل الآن إلى تعريف 'jsFunc()':
< النصي >وظيفة jsFunc ( ) {
مقدار ثابت عنصر = وثيقة. getElementById ( 'myDiv' ) ;
وحدة التحكم. سجل ( عنصر. dataset ) ;
}
النصي >
في سطور الكود أعلاه:
- ال ' شبسفونك () 'يعلن أولاً عن متغير 'elem' الذي يطبق ' document.getElementById() ' طريقة للوصول إلى عنصر div المضاف عبر المعرف الخاص به 'myDiv'.
- وبعد ذلك يستخدم ' console.log() 'الطريقة التي ستستخدم' dataset 'للوصول إلى سمات البيانات الخاصة بعنصر div الذي تم الوصول إليه وعرضها في وحدة تحكم الويب.
انتاج |
اضغط على F12 لفتح وحدة تحكم الويب:
ويمكن ملاحظة أنه عند النقر على الزر المحدد، تظهر وحدة التحكم ' DOMStringMap ' يحتوي على كافة سمات البيانات الخاصة بعنصر div.
الوصول إلى قيمة محددة
إذا أراد المستخدم الوصول إلى سمة البيانات المحددة، فحدد اسمها باستخدام خاصية 'مجموعة البيانات' مثل هذا:
< النصي >وظيفة الحصول على ( ) {
مقدار ثابت عنصر = وثيقة. getElementById ( 'myDiv' ) ;
وحدة التحكم. سجل ( عنصر. dataset . اسم ) ;
}
النصي >
في هذا الوقت، يتم الوصول إلى سمات بيانات 'الاسم' باستخدام ' dataset ' ملكية.
انتاج |
يمكن ملاحظة أن وحدة التحكم تعرض فقط قيمة سمات البيانات المحددة عند النقر على الزر.
المثال 2: قراءة/الوصول إلى سمة البيانات باستخدام طريقة 'getAttribute()'.
يستخدم هذا المثال طريقة 'getAttribute()' لقراءة/الوصول إلى سمات البيانات.
في هذا السيناريو، يتم أيضًا تضمين عنصر الزر في المثال الأول:
< زر عند النقر = 'جسفونك ()' > سمة بيانات الوصول زر >دعونا نرى وظيفة طريقة 'getAttribute()':
< النصي >وظيفة jsFunc ( ) {
مقدار ثابت عنصر = وثيقة. getElementById ( 'myDiv' ) ;
وحدة التحكم. سجل ( عنصر. getAttribute ( 'اسم البيانات' ) ) ;
وحدة التحكم. سجل ( عنصر. getAttribute ( 'عصر البيانات' ) ) ;
وحدة التحكم. سجل ( عنصر. getAttribute ( 'جنس البيانات' ) ) ;
}
النصي >
في مقتطف الكود أعلاه:
- يطبق المتغير 'elem' ' document.getElementById() ' طريقة للوصول إلى عنصر div المضاف باستخدام المعرف الخاص به 'myDiv'.
- التالي ' console.log() 'تستخدم الطريقة' الحصول على سمة () ' للحصول على قيمة سمة 'البيانات' المحددة لعنصر div الذي تم جلبه ثم عرضها في وحدة تحكم الويب.
- يتم تنفيذ نفس المهمة للوصول إلى سمات البيانات المحددة المتبقية.
ملحوظة: تحدد طريقة 'getAttribute()' سمة البيانات بالبادئة 'data' متبوعة بواصلة (-) أي (data-) التي لا تتطلبها أثناء استخدام خاصية 'dataset()'.
انتاج |
يعرض الإخراج أعلاه جميع قيم سمات البيانات المحددة عند النقر على الزر.
المثال 3: كتابة سمة بيانات باستخدام خاصية 'مجموعة البيانات'.
يكتب هذا المثال سمات البيانات باستخدام خاصية 'مجموعة البيانات'.
يتم تغيير محتوى عنصر الزر وفقًا للسيناريو الحالي:
< زر عند النقر = 'جسفونك ()' > كتابة سمة البيانات زر >الآن، اكتب سمة البيانات الجديدة في عنصر div المُضاف:
< النصي >وظيفة jsFunc ( ) {
مقدار ثابت عنصر = وثيقة. getElementById ( 'myDiv' ) ;
عنصر. dataset . بطاقة تعريف = 'شخص'
وحدة التحكم. سجل ( عنصر. dataset ) ;
}
النصي >
في كتلة التعليمات البرمجية أعلاه:
- ال ' dataset تكتب الخاصية اسمًا جديدًا لسمة البيانات 'id' بقيمة سلسلة محددة.
- التالي ' conolse.log() 'يستخدم خاصية 'مجموعة البيانات' لعرض واجهة 'DOMStringMap' التي تحتوي على سمة البيانات المكتوبة حديثًا في وحدة تحكم الويب.
انتاج |
هنا، تعرض وحدة التحكم 'DOMStringMap' الذي يحتوي على سمة البيانات الجديدة 'id' المكتوبة باستخدام خاصية 'dataset'.
المثال 4: تحديث قيمة سمة البيانات
يقوم هذا المثال بتحديث القيمة الحالية لسمة بيانات محددة بمساعدة خاصية 'مجموعة البيانات'.
يتم تغيير نص عنصر الزر وفقًا للسيناريو المحدد:
< زر عند النقر = 'جسفونك ()' > تحديث سمة البيانات زر >انتقل الآن إلى قسم JavaScript:
< النصي >وظيفة jsFunc ( ) {
مقدار ثابت عنصر = وثيقة. getElementById ( 'myDiv' ) ;
عنصر. dataset . اسم = 'جون'
وحدة التحكم. سجل ( عنصر. dataset . اسم ) ;
}
النصي >
في مقطع التعليمات البرمجية أعلاه، يتم تحديث قيمة سمة بيانات 'الاسم' المحددة بمساعدة ' dataset ' ملكية.
انتاج |
تعرض وحدة التحكم القيمة المحدثة لسمات البيانات المحددة عند النقر على الزر.
المثال 5: حذف سمة البيانات
يحذف هذا المثال سمة البيانات المحددة باستخدام الكلمة الأساسية 'حذف'.
يتم تغيير نص عنصر الزر حسب المتطلبات:
< زر عند النقر = 'جسفونك ()' > حذف سمة البيانات زر >الآن، اتبع كتلة التعليمات البرمجية لجافا سكريبت:
< النصي >وظيفة jsFunc ( ) {
مقدار ثابت عنصر = وثيقة. getElementById ( 'myDiv' ) ;
حذف العنصر. dataset . عمر ;
وحدة التحكم. سجل ( عنصر. dataset . عمر ) ;
}
النصي >
يحدد مقتطف الكود أعلاه ' يمسح 'الكلمة الرئيسية التي تحتوي على خاصية 'مجموعة البيانات' لحذف سمة البيانات التي تم الوصول إليها.
انتاج |
ويلاحظ أن وحدة التحكم تظهر ' غير معرف 'بنقرة زر تتحقق بوضوح من حذف سمة البيانات التي تم الوصول إليها.
خاتمة
في JavaScript، يمكن استخدام سمات البيانات بطرق مختلفة مثل قراءتها والوصول إليها وكتابتها وتحديثها وحذفها وفقًا للمتطلبات. يمكن تنفيذ كل هذه المهام بمساعدة '' المدمج في dataset ' ملكية. ومع ذلك، يمكن للمستخدم أيضًا الوصول إلى سمة البيانات واحدة تلو الأخرى بمساعدة ' الحصول على سمة () ' طريقة. لقد أوضح هذا المنشور عمليًا استخدام سمات البيانات في JavaScript.