تغيير أنماط العناصر باستخدام getElementsByClassName

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

تشخيص المشكلة

يحتوي الكود المقدم على بعض المشكلات:

1. الاستخدام غير الصحيح لـ getElementsByClassName: يُرجع بناء الجملة getElementsByClassName() مجموعة من العناصر المطابقة، وليس عنصر DOM واحد. لتغيير نمط كل عنصر، تحتاج إلى التكرار عبر المجموعة.
2. بناء جملة HTML غير صالح: لا يمكن أن يحتوي معرف العنصر على مسافات، مما يجعل معرفات colorwitcher A وcolorwitcher B غير صالحة .

الحل

لحل هذه المشكلات، يمكنك استخدام الكود المصحح التالي:

window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i 
في هذا الكود المصحح:
نقوم بالتكرار عبر المجموعات التي تم إرجاعها بواسطة getElementsByClassName لتغيير نمط جميع العناصر المطابقة.
نستخدم المعرفات الصحيحة بدون مسافات. لتحديد العناصر المسببة.
نحدد وظيفة تغيير اللون لتطبيق تغيير اللون المطلوب على العناصر.
ملاحظات إضافية
 للحصول على الأداء الأمثل، فكر في تخزين مجموعة العناصر مؤقتًا بدلاً من إعادة الاستعلام عنها في كل مرة. بالإضافة إلى ذلك، يعد استخدام فئات CSS ومستمعي الأحداث لتغييرات النمط أكثر كفاءة من السمات المضمنة.