HTMLCollection 要素を正しく反復処理してその ID を取得するにはどうすればよいですか?

HTMLCollection 要素の For ループ

説明

HTMLCollection を反復処理して各要素の ID を取得しようとしています。ただし、最初のアプローチは間違っています。 for (key in list) を使用すると、要素のインデックスである HTMLCollection のキーを反復処理します。

正しいアプローチ

HTMLCollection オブジェクト自体を反復処理し、 ID にアクセスするには、次のコマンドを使用できます:

1. for/of ループ (最新のブラウザ)

ES6 の for/of 構文をサポートする最新のブラウザの場合は、次のコードを使用できます:

var list = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}

2.長さプロパティを使用した for ループ

for/of 構文をサポートしていないブラウザの場合は、次のコードを使用できます:

var list = document.getElementsByClassName("events");
for (var i = 0; i < list.length; i++) {
    console.log(list[i].id);
}

for/in の使用を避ける

HTMLCollection を反復処理するために for/in を使用しないでください。これは、オブジェクト プロパティを反復処理することを目的としており、HTMLCollection オブジェクトで予期しない動作が発生する可能性があります。

概要

最新のブラウザーの場合、推奨されるアプローチは for/of 構文を使用することであることに注意してください。古いブラウザの場合は、長さプロパティを使用した for ループのアプローチが機能します。 HTMLCollections には for/in を使用しないでください。

以上がHTMLCollection 要素を正しく反復処理してその ID を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。