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

تعديل خصائص العنصر في جافاسكربت
الحصول على قيمة الخاصية
إضافة خاصية جديدة / تحديث قيمتها
حذف خاصية موجودة في العنصر
التعامل مع الخصائص على اختلاف أنواعها

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

الكائن 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);

// 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');

// 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', '');

// 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');

// 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);

// 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);

جرب الكود

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

كمثال على الخصائص التي قد يضيفها المطور على وسوم HTML فإننا في موقع هرمش قمنا بتطوير خاصية إسمها sound عندما نضيفها للوسوم فإنها تعرض بجانبها أيقونة تشغيل للصوت و عند النقر عليها تقوم بقراءة النص الموضوع بجانبها.. هذا الأمر يمكنك رؤيته في دورة تعلم اللغة الإنجليزية 🙂

الدرس التالي❯ ❮الدرس السابق

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

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

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

مثال

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

المثال الأول

المثال الثاني

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

مثال

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

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث