HTMLCollection 从对象中获取每个元素

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?

Answer 1

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)) })