التكرار عبر العناصر المحددة باستخدام document.querySelectorAll

في كثير من الأحيان في تطوير الويب، يكون التكرار على العناصر المحددة ضروريًا. يوفر document.querySelectorAll كائنًا يشبه المصفوفة يمثل العناصر المحددة. ومع ذلك، يمكن أن تنشأ مشكلات إذا تم تنفيذ التكرار مباشرة على NodeList، مما يؤدي إلى ظهور عناصر إضافية في الإخراج.

للتكرار بشكل صحيح عبر العناصر المحددة، قم بتحويل NodeList إلى مصفوفة باستخدام بناء جملة الانتشار. ومن خلال التكرار على المصفوفة الناتجة بدلاً من ذلك، يمكنك تجنب العناصر الإضافية. تعتبر هذه الطريقة مثالية لبيئات JavaScript الحديثة مع دعم ES2015 وBabel.js.

على سبيل المثال، إذا كنت تريد تكرار مربعات الاختيار باستخدام document.querySelectorAll('.check'):

var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

checkboxesArray.forEach(checkbox => {
  console.log(checkbox);
});

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