متى استخدم getElementsByClassName ومتى getElementById

نحن نستعمل التابعين السابقين لجلب عنصر من ال html  و بالتالي فإنه لمعرفة متى نستعمل كل منهما يجب معرفة متى نستعمل id و متى نستعمل class لعنصر في ال html.

إن id هو شيء فريد و لا يكون لعنصرين نفس ال id،  و بالتالي نستعمل التابع الخاص بال id عندما نريد جلب عنصر واحد فريد.

بينما ال class يمكن تطبيق نفس القيمة على أكثر من عنصر، مثلاً نحن نكتب عدة مقالات في الموقع فنعطي لكل مكون يعبر عن مقالة class هو article هنا يجب أن نجلب أكثر من قيمة و بالتالي علينا استعمال تابع ال class و ليس تابع ال id.

أي باختصار التابع الخاص بال id نستعمله لجلب عنصر واحد بينما الثاني نستعمله لجلب مجموعة من العناصر التي غالباً ما يجمعها شيء ما.

نستخدم getElementsByClassName  عندما نريد التعامل مع مجموعة من العناصر بنفس الطريقة مثل التعامل مع مجموعة من الازرار لها نفس الوظيفة في صفحة الويب. 

بينما الـ getElementById نستخدمها للتعامل مع عنصر واحد له وظيفة واحدة محددة فقط.

والفرق بين الاثنين هو أن الـ getElementsByClassName تعيد مصفوفة تحتوي كل العناصر التي تملك الـ class المعطى بينما الـ getElementById تعيد عنصر واحد فقط.

للإيضاح اكثر إليك لاحظ السؤال التالي :

إذا كان لدينا 4 عناصر من النوع section ونريد تغيير المحتوى الخاص بهم باستخدام js فأي من الوظيفتين السابقتين يجب ان نستخدم ؟.

الجواب هو الوظيفة getElementsByClassName.

اطلع على getElementsByClassName من موسوعة حسوب

اطلع على getElementById من موسوعة حسوب

تعرف اكثر عن الكائن المستند Dom ووظائفه من خلال المقالة التالية :

يتم استخدام getElementsByClassName و getElementById في الجافاسكريبت لتلافي الحاجة إلى تكرار الأكواد وتبسيط عملية الوصول إلى العناصر الخاصة بصفحة الويب.

تحتوي كلا الوظيفتين على الخصائص المختلفة التي يمكن استخدامها لتعديل الصفحة عبر الجافاسكريبت. على سبيل المثال، يمكن استخدام getElementsByClassName لتغيير خصائص العناصر المختلفة في الصفحة، مثل تغيير لون الخلفية، وتغيير الحجم، والتحكم في الرسومات.

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

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

ومنها:

1- تغيير نص عنصر:

يمكن استخدام الدالة innerHTML لتغيير نص عنصر معين باستخدام getElementById. على سبيل المثال، لتغيير نص عنصر الفقرة <p> الذي لديه العنصر id="para"، يمكن استخدام الكود التالي:

document.getElementById("para").innerHTML = "تغيير النص هنا";

2- تغيير الأسلوب الخاص بعنصر:

يمكن استخدام الدالة style لتغيير الأسلوب الخاص بعنصر معين باستخدام getElementById. على سبيل المثال، لتغيير لون خلفية عنصر الفقرة <p> الذي لديه العنصر id="para"، يمكن استخدام الكود التالي:

document.getElementById("para").style.backgroundColor = "red";

3- تغيير الأسلوب الخاص بمجموعة من العناصر:

يمكن استخدام الدالة style أيضًا لتغيير الأسلوب الخاص بمجموعة من العناصر باستخدام getElementsByClassName. على سبيل المثال، لتغيير لون خلفية جميع عناصر الفقرة <p> التي لديها العنصر class="para"، يمكن استخدام الكود التالي:

const elements = document.getElementsByClassName("para");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "red";
}

4- إضافة أو إزالة فئة CSS من عنصر:

يمكن استخدام الدالة classList لإضافة أو إزالة فئة CSS من عنصر معين باستخدام getElementById أو getElementsByClassName. على سبيل المثال، لإضافة فئة CSS جديدة إلى عنصر الفقرة <p> الذي لديه العنصر id="para"، يمكن استخدام الكود التالي:

document.getElementById("para").classList.add("new-class");

5- تحديد حدث على عنصر:

يمكن استخدام addEventListener لإضافة حدث إلى عنصر محدد. ويتم استخدام هذه الوظيفة عادة للتعامل مع تفاعلات المستخدم مثل النقر، الضغط، التمرير وغيرها.

على سبيل المثال، يمكن استخدام الوظيفة التالية لإضافة حدث النقر على زر "أضف إلى السلة":

const addToCartBtn = document.getElementById('add-to-cart-btn');
addToCartBtn.addEventListener('click', function() {
  // الكود الذي يتم تنفيذه عند النقر على زر "أضف إلى السلة"
});

6- تغيير محتوى العنصر:

يمكن استخدام خاصية innerHTML لتغيير محتوى عنصر HTML. على سبيل المثال، يمكن استخدام الوظيفة التالية لتغيير نص داخل عنصر بواسطة getElementById:

const myElement = document.getElementById('my-element');
myElement.innerHTML = "النص الجديد";

يمكن استخدام نفس الطريقة لتغيير محتوى العناصر التي تم العثور عليها باستخدام getElementsByClassName.

7- تغيير خصائص العنصر:

يمكن استخدام خاصية العنصر style لتغيير الخصائص الرسومية لعنصر HTML. على سبيل المثال، يمكن استخدام الوظيفة التالية لتغيير خلفية عنصر باستخدام getElementById:

const myElement = document.getElementById('my-element');
myElement.style.backgroundColor = "red";

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