HTMLCollection：innerHTMLの値を取得できているがエラーになる

Question

Typescriptを使用しています。
htmlの値を取得したく、class名からコンソール出力したしたところ、
該当クラスはHTMLCollectionで表示されました。

取得したい値はしっかり入っていましたが、取得した値とともにエラーが吐き出されます。

var elements = document.getElementsByClassName('hoge');
for (var i = 0; elements.length; i++) {
     var moge = elements[i].innerHTML;
     console.log(moge);
}

ERROR TypeError: Cannot read properties of undefined (reading 'innerHTML')

プロパティが未定義とのことですが、innerHTMLの定義をする必要があるということでしょうか？

innerHTML:any;

などといった型定義をする必要がありますか？

何卒ご教授いただけたら幸いです。

Answer 1

for (var i = 0; elements.length; i++) {
↓↓↓
for (var i = 0; i<elements.length; i++) {

ではないのでしょうか？

Comments

[xxx0_0xxx]

いつも回答ありがとうございます！
初めはそれを試したのですが、今度はundefinedとなってしまい、
値が取得できなくなってしまうのです・・・

Answer 2

iterable持ってるため、for...ofの方が読みやすいと思います。

const elements = document.getElementsByClassName('hoge');
for (const element of elements) {
  console.log(element.innerHTML);
}

iterable持ってるかはこちらで確認できます。

const elements = document.getElementsByClassName('hoge');
elements[Symbol.iterator]()
>> Array Iterator {}

Comments

[xxx0_0xxx]

回答ありがとうございます。
const elements = document.getElementsByClassName('hoge');
for (const element of elements) {
console.log(element.innerHTML);
}
上記で試してみましたが、

TS2495: Type 'HTMLCollectionOf<Element>' is not an array type or a string type.

というエラーが吐き出されてしまいました。

const elements = document.getElementsByClassName('hoge') as HTMLCollectionOf<HTMLElement>;

という書き方をサイトで発見したため、こちらも試しましたが再度同じエラーが吐き出されました・・・

[heroyct]

こちらでいけると思います。

```
const elements = document.getElementsByClassName('hoge');
for (const element of elements as any) {
console.log(element.innerHTML);
}
```