How to iterate through HTMLElements with specific class in TypeScript?

Question

I want to iterate through all HTML elements with a specific class name in TypeScript. I tried:

let elements = [...document.getElementsByClassName("myclass")];

But I get this error TS2488: Type 'HTMLCollectionOf ' must have a '[Symbol.iterator]()' method that returns an iterator.

---

let elements = document.getElementsByClassName("myclass");
Array.prototype.forEach.call(elements, function (item:HTMLElement) {
    // do stuff with the item
});

but this only works for the first item. If I use alert(item.innerText) I only receive one alert.

What's the proper way to iterate through a HTMLCollection?

Thank you!

Answer 1

You will want to use array.from() and then use a forEach on that array. Here is a working codesandbox to look at an example: https://codesandbox.io/s/youthful-wozniak-rs4d70?file=/index.html

let elements = document.getElementsByClassName("myclass");
Array.from(elements).forEach(function (element) {
  element.innerHTML = "Edited";
});