HTMLCollection get every element from object

Question

How can I make a loop for this collection to get every element? I have tried these methods but they didn't work

const collection = document.getElementsByClassName('fc-daygrid-day-top') the type is an object

The First Method

for(let arr of Array(collection)){console.log(Array(collection)[i])} // Doesn't work

The second method

var arr = [...collection]; // can't convert to array

May you know how to get every element from this object?

I tried it with `querySelectorAll()` and `forEach` and it worked. — Parsa Arvaneh, May 18 '22 at 06:18
You shouldn't convert the collection to an array in your first method example. — Felix, May 18 '22 at 06:18
If you want to stick with `getElementByClassName` see this post https://stackoverflow.com/questions/48888574/using-foreach-to-loop-through-a-class-element — vaughngx4, May 18 '22 at 06:20

MORÈ · Answer 1 · 2022-05-18T06:30:50.400

Here for(let arr of Array(collection)) array is created with only single element and that is HTMLCollection and cant iterate through. Array constructor need elements or size. Fetched HTMLCollection is put into array as single element. Better use spread operator to spread elements into array. for(let arr of Array(...elements))

You can either use for let of ... to iterate through HTMLCollection.

window.addEventListener('DOMContentLoaded', function(){
    let elements = document.getElementsByClassName('test');
    for(let element of elements)
        console.log(element.textContent);               
})

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<div class="test">6</div>

Or convert it to array with Array.from and iterate

window.addEventListener('DOMContentLoaded', function(){
    let elements = document.getElementsByClassName('test');
  Array.from(elements).map(element => console.log(element.textContent))                 
})

HTMLCollection get every element from object

1 Answers1