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

المشكلة: عند محاولة التكرار عبر العناصر المحددة باستخدام document.querySelectorAll، تتضمن المخرجات عناصر إضافية وغير ذات صلة items.

مثال:

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

الإخراج: 10 غرض() nameItem()

10
item()
namedItem()

لتكرار العناصر المحددة بشكل صحيح، قم بتحويل NodeList إلى مصفوفة. هناك عدة طرق للقيام بذلك:

1. صيغة الانتشار (ES2015 ):

   const divs = [...document.querySelectorAll(' div')]; divs.forEach((div) => { // افعل شيئًا مع كل شعبة });

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

2. Array.from():

   const divs = Array.from(document.querySelectorAll('div')); divs.forEach((div) => { // افعل شيئًا مع كل شعبة });

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

3. التكرار فوق مؤشرات العقدة:

   const checkboxes = document.querySelectorAll('.check'); من أجل (دع i = 0؛ i

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });