JavaScript में getElementsByClassName() से सही तरीके से कैसे इटरेट करें?

getElementsByClassName() एक लाइव HTMLCollection लौटाता है, ऐरे नहीं। इसे सही से इटरेट करने के लिए for लूप, Array.from(), या स्प्रेड ऑपरेटर उपयोग करें।

समस्या: लाइव कलेक्शन

const items = document.getElementsByClassName('demo');

// ❌ गलत: लूप के दौरान लंबाई बदलती है यदि DOM मॉडिफाई होता है
// ❌ forEach सीधे काम नहीं करता - HTMLCollection में नहीं है

विधि 1: पारंपरिक for लूप (सबसे तेज़, कोई कॉपी नहीं)

<div class="demo">पहला प्रोग्राम</div>
<div class="demo">दूसरा प्रोग्राम</div>
<div class="demo">तीसरा प्रोग्राम</div>

<script>
    const elements = document.getElementsByClassName('demo');
    
    for (let i = 0; i < elements.length; i++) {
        console.log(elements[i].innerHTML);
    }
</script>

विधि 2: Array.from() - ऐरे में बदलें (मॉडर्न)

const elements = document.getElementsByClassName('demo');
const arr = Array.from(elements);

arr.forEach(el => console.log(el.innerHTML));

// या एक लाइन में
Array.from(document.getElementsByClassName('demo')).forEach(el => 
    console.log(el.textContent)
);

विधि 3: स्प्रेड ऑपरेटर (ES6)

[...document.getElementsByClassName('demo')].forEach(el => 
    console.log(el.innerHTML)
);

विधि 4: querySelectorAll (स्टैटिक NodeList - अक्सर बेहतर)

// यह NodeList लौटाता है जिसमें forEach होता है!
const elements = document.querySelectorAll('.demo');
elements.forEach(el => console.log(el.innerHTML));

// फर्क: querySelectorAll स्टैटिक है (लाइव नहीं)

चलाने का तरीका

HTML फ़ाइल में ऊपर का कोड डालकर ब्राउज़र में खोलें, कंसोल देखें (F12)।

आउटपुट

पहला प्रोग्राम
दूसरा प्रोग्राम
तीसरा प्रोग्राम

तुलना: HTMLCollection vs NodeList

सिफारिश

अधिकांश मामलों में querySelectorAll उपयोग करें - इसमें forEach बिल्ट-इन है और स्टैटिक होने से बग कम होते हैं।