document.querySelectorAll के साथ चयनित तत्वों के माध्यम से लूपिंग

समस्या:
चयनित तत्वों के माध्यम से लूप करने का प्रयास करते समय document.querySelectorAll का उपयोग करके, आउटपुट में अतिरिक्त, अप्रासंगिक शामिल हैं आइटम।

उदाहरण:

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

आउटपुट:

10
item()
namedItem()

समस्या इसलिए उत्पन्न होती है क्योंकि document.querySelectorAll एक NodeList लौटाता है, जो एक सरणी जैसी वस्तु है। हालाँकि, NodeList forEach जैसी सरणी विधियों का समर्थन नहीं करता है।

Solution:

चयनित तत्वों के माध्यम से ठीक से लूप करने के लिए, NodeList को एक सरणी में परिवर्तित करें। ऐसा करने के कई तरीके हैं:

1. स्प्रेड सिंटैक्स (ES2015 ):

   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) => {
     // Do something with each div
   });

3. नोड सूचकांकों पर लूपिंग:

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i