ما الفرق بين الدالة getElementById و الدالة getElementsByClassName

وعليكم السلام ورحمة الله وبركاته.

نستخدم getElementsByClassName  عندما نريد التعامل مع مجموعة من العناصر حيث أن الدالة getElementsByClassName  تقوم بالبحث عن جميع العناصر التي لها السمة التي نريد البحث عنها وتضمينها في قائمة واحدة معا.

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

ويمكنك الإطلاع على الإجابة التالية لمزيد من التفاصيل :

وعليكم السلام ورحمة الله وبركاته.

صحيح أن getElementById() يرجع عنصر واحد فقط وذلك لأن ID يجب أن يكون فريد لذا من الطبيعي أن تُرجع عنصرًا واحدًا فقط بينما getElementsByClassName() يرجع مجموعة عناصر (Collection) لأن اسم الصنف (class) يمكن أن يتم استخدامه لأكثر من عنصر في الصفحة، وبالتالي من الممكن أن يكون هناك عدة عناصر تتطابق مع اسم الصنف المحدد.

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

getElementById هي لتحديد عنصر واحد فقط في الصفحة حسب قيمة السمة id الخاصة به، ومن المفترض أن تكون قيم id فريدة في صفحة HTML واحدة، أي لا يتكرر نفس id لعنصرين مختلفين، أي يبحث المتصفح عن أول عنصر يطابق قيمة id المُعطاة، وبمجرد العثور عليه، يُرجعه كـ عنصر DOM واحد.

بينما getElementsByClassName هي لتحديد جميع العناصر التي تحمل اسم class مُعين، وبالطبع يمكن أن يشترك أكثر من عنصر في نفس اسم الكلاس،  ويبحث المتصفح عن جميع العناصر التي تحتوي على اسم الكلاس المُعطى، ويُرجعها في شكل مجموعة، أي كائنًا يُسمى HTMLCollection، وهو يُشبه المصفوفة ويحتوي على جميع عناصر HTML التي تطابق اسم الكلاس المُعطى، وحتى لو هناك عنصر واحد فقط يحمل اسم الكلاس، فسيتم إرجاعه داخل HTMLCollection، وإن لم يتم العثور على أي عنصر، فسيتم إرجاع HTMLCollection فارغة.