جافاسكربتالوصول لخصائص العناصر

تعديل خصائص العنصر في جافاسكربت

الكائن document يوفر دوال جاهزة يمكن من خلالها الحصول على قيم الخصائص الموجودة في العنصر، تغيير قيم الخصائص، إضافة خصائص جديدة فيه بالإضافة إلى حذف خصائص منه.

في هذا الدرس ستتعلم كل الطرق التي يمكنك من خلالها التعامل مع خصائص العناصر بواسطة جافاسكربت.

الحصول على قيمة الخاصية

يمكنك استخدام الدالة getAttribute() للحصول على قيمة أي خاصية موجودة في العنصر.
يجب تمرير إسم الخاصية التي تريد الحصول على قيمتها كنص للدالة.

في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo.
بعدها قمنا بعرض قيمة الخاصية href الموجودة فيه.

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// link في متغير إسمه element الموجودة في العنصر الذي يمثله المتغير href هنا قمنا بتخزين قيمة الخاصية
var link = element.getAttribute('href');

// في آخر الصفحة link هنا قمنا بعرض قيمة المتغير
document.write('link = ' + link);

إضافة خاصية جديدة / تحديث قيمتها

يمكنك استخدام الدالة setAttribute() لتحديث قيمة خاصية موجودة في العنصر و لإضافة الخاصية فيه إن لم يكن يمكلها.
يجب تمرير إسم الخاصية و القيمة التي تريد إعطاءها للعنصر كنصوص للدالة.

في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo.
بعدها قمنا بإعطائه الخاصية و القيمة target="_blank" لجعل الرابط يفتح في صفحة جديدة عندما يتم النقر عليه.

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element للعنصر الذي يمثله المتغير target="_blank" هنا قمنا بإضافة الخاصية
element.setAttribute('target', '_blank');

في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo.
بعدها قمنا بإعطائه الخاصية و القيمة disabled="" لجعل الزر غير مفعّل و بالتالي لا يمكن النقر عليه.

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element للعنصر الذي يمثله المتغير disabled هنا قمنا بإضافة الخاصية
element.setAttribute('disabled', '');

حذف خاصية موجودة في العنصر

يمكنك استخدام الدالة removeAttribute() لإزالة أي خاصية موجودة في العنصر.
يجب تمرير إسم الخاصية التي تريد إزالتها من العنصر كنص للدالة.

في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo.
بعدها قمنا بإزالة الخاصية href لجعل الرابط لا يعمل.

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element من العنصر الذي يمثله المتغير href هنا قمنا بإزالة الخاصية
element.removeAttribute('href');

التعامل مع الخصائص على اختلاف أنواعها

الخصائص الجاهزة في HTML مثل الخاصية width التي يمكن إضافتها للوسم <img> لتحديد عرض الصورة، الخاصية href التي يمكن إضافتها للوسم <a> لتحديد مسار الرابط، الخاصية src التي يمكن إضافتها للوسم <img> لتحديد مسار الصورة يمكن التعامل معهم بشكل مباشر من الكائنات التي تمثلهم، فهي خصائص معروفة بالنسبة لمفسر جافاسكربت.

في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo.
بعدها قمنا بإضافة الخاصية src له لكي نحدد مسار الصورة التي نريد إظهارها فيه.
في النهاية قمنا بعرض قيمة الخاصية src في آخر الصفحة.

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element للعنصر الذي يمثله المتغير src هنا قمنا بتحديد قيمة الخاصية
element.src = 'https://harmash.com/tutorials/javascript/dom-elements-attributes/harmash-logo.PNG';

// element التي يمكلها العنصر الذي يمثله المتغير src هنا قمنا بطابعة قيمة الخاصية
document.write('Image source = ' + element.src);