JavaScript-এ getElementsByClassName() সঠিকভাবে ইটারেট করা

JavaScript-এ `document.getElementsByClassName()` একটি **HTMLCollection** (লাইভ) রিটার্ন করে, যা অ্যারে নয়। সঠিকভাবে ইটারেট করার জন্য ফর লুপ বা `Array.from()` ব্যবহার করতে হয়।

HTML স্ট্রাকচার

<div class="demo">My First JavaScript Program</div>
<div class="demo">This is the second Program</div>
<div class="demo">This is the third Program</div>

পদ্ধতি ১: ফর লুপ (সঠিক ও কমপ্যাটিবল)

var elements = document.getElementsByClassName('demo');

for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerHTML);
}

পদ্ধতি ২: Array.from() (আধুনিক)

Array.from(document.getElementsByClassName('demo'))
    .forEach(el => console.log(el.innerHTML));

পদ্ধতি ৩: Spread Operator (ES6+)

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

পূর্ণ HTML উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Iterate Class Elements</title>
</head>
<body>
    <div class="demo">My First JavaScript Program</div>
    <div class="demo">This is the second Program</div>
    <div class="demo">This is the third Program</div>

    <script>
        var className = document.getElementsByClassName('demo');
        
        // সঠিক: ফর লুপ
        for (var i = 0; i < className.length; i++) {
            console.log(className[i].innerHTML);
        }
    </script>
</body>
</html>

চলানোর পদ্ধতি

ফাইলটি iterateClass.html নামে সংরক্ষণ করুন।
VS Code-এ Open with Live Server দিয়ে চালান।
কনসোল (F12) দেখুন।

আউটপুট

My First JavaScript Program
This is the second Program
This is the third Program

HTMLCollection vs NodeList vs Array

ফিচার	HTMLCollection	NodeList	Array
লাইভ (Live)	হ্যাঁ	কিছু কিছু	না
forEach()	না	হ্যাঁ (মডার্ন)	হ্যাঁ
অবজেক্ট মেথড	নहीं	নहीं	হ্যাঁ
সোর্স	getElementsByClassName	querySelectorAll	Array.from()

সতর্কতা

HTMLCollection লাইভ: DOM চেঞ্জ হলে অটো আপডেট হয় (লুপে বাগ করতে পারে)।
ইটারেশনের আগে `Array.from()` দিয়ে কপি করলে সেফ।
`querySelectorAll()` Static NodeList দেয় (সুরক্ষিত)۔