شباب طلعت روحي وانة احاول احضر عدة عناصر في الجافاسكربت لهم نفس الكلاس في الhtml

في الحقيقة لا يوجد في جافاسكربت تابع لجلب عنصر كالتالي getElementByClassName في حين أنه يوجد و بشكل عادي ما هو كالتالي getElementsByClassName أو getElementById . و ينطلق هذا من منطق إمكانية إمتلاك عنصر الـ html على صنف class مماثل لعنصر اخر في ذات الصفحة . في حين أنه المعرف id فريد ولا يمكن أن يتكرر .

فالتابع getElementsByClassName يقوم بجلب مجموعة عناصر تملك نفس الصنف class , ممثلة في كائن مشابه لمصفوفة كائنات كل منها يمثل عنصرا .

في حين أن التابع getElementById يعيد كائنا يمثل العنصر الحامل للمعرف id الذي يوافق السلسلة النصية المحددة .

و لهذا يمكن القراءة مباشرة من getElementById في حين أن القراءة من getElementsByClassName تتطلب الدور على مجموعة العناصر المعادة و ذلك بهدف الوصول اليها .

يمكنك الإطلاع أكثر على توثيق كل منهما في :

يوجد أكثر من طريقة في جافاسكريبت لكي تستطيع الوصول إلى أحد عناصر HTML عبر صنف Class معين، ومن ضمن هذه الطرق getElementsByClassName، ولكن من عيوبها أن تقوم بإرجاع كل العناصر التي تحتوي على Class معين وبالتالي تحتاج إلى إستخدام index للوصول إلى أول عنصر كالتالي:

var links = document.getElementsByClassName('mylink');
var firstLink = links[0]; // أول عنصر في الصفحة لديه الصنف mylink

أيضًا يمكنك أن تستعمل querySelector وسوف يقوم أول عنصر يتم تحديد، على النحو التالي:

var firstLink = document.querySelector('.mylink');

لاحظ أن التابع querySelector يأخذ أي محدد CSS لذلك يجب أن يتم إضافة نقطة في بداية المحدد .mylink وسوف يقوم هذا التابع بإرجاع أول عنصر لديه الصنف mylink

لمزيد من المعلومات عن التابع querySelector يمكنك أن تقرأ عنه في موسوعة حسوب من هنا:

ملاحظة: لاحظ أن هناك تابع آخر باسم querySelector يقوم بإرجاع كل العناصر التي ينطبق عليها المحدد Selector وليس أول عنصر فقط.

document.querySelectorAll(".className")