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

अक्सर वेब विकास में, चयनित तत्वों पर लूपिंग आवश्यक है। document.querySelectorAll चयनित तत्वों का प्रतिनिधित्व करने वाली एक सरणी जैसी वस्तु प्रदान करता है। हालाँकि, यदि पुनरावृत्ति सीधे नोडलिस्ट पर की जाती है, तो समस्याएँ उत्पन्न हो सकती हैं, जिसके परिणामस्वरूप आउटपुट में अतिरिक्त आइटम दिखाई देंगे।

चयनित तत्वों के माध्यम से ठीक से लूप करने के लिए, स्प्रेड सिंटैक्स का उपयोग करके नोडलिस्ट को एक सरणी में परिवर्तित करें। इसके बजाय परिणामी सरणी पर पुनरावृत्ति करके, आप अतिरिक्त आइटम से बच सकते हैं। यह विधि ES2015 और बैबेल.जेएस के समर्थन के साथ आधुनिक जावास्क्रिप्ट वातावरण के लिए आदर्श है।

उदाहरण के लिए, यदि आप document.querySelectorAll('.check'):

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

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

यह कोड स्निपेट बिना किसी अतिरिक्त आइटम के केवल चेकबॉक्स तत्वों पर सही ढंग से पुनरावृत्ति करेगा।