NodeList_javascript の使用時に注意する必要がある問題のヒント

したがって、彼らは常に最新かつ最も正確な情報を持っています。基本的に、すべての NodeList オブジェクトは、DOM ドキュメントにアクセスするときにリアルタイムで実行されるクエリです。たとえば、次のコードは無限ループを引き起こします:

コードをコピー コードは次のとおりです:

まずページを取得します。 div 内のすべての div について、このコレクション (divObj) は「動的」であるため、新しい div がページに挿入されるたびに、divObj は新しく追加された div を追加します。つまり、divObj にアクセスしている限り、再度クエリが実行され、divObj が再度更新されます。したがって、上記のコードは、各ループ中に新しい div が挿入され、各ループで条件 i

NodeList を反復処理する場合は、length プロパティを使用して 2 番目の変数を初期化し、反復子をその変数と比較するのが最善です。次のコードに示すように:

コードをコピー コードは次のとおりです:

この例では、2 番目の変数 (len) が初期化されます。 len はループの先頭で divObj.length のスナップショットを保存するため、前の例の無限ループは回避されます。

要約: 一般に、NodeList へのアクセス数は最小限に抑える必要があります。 NodeList にアクセスするたびに、ドキュメントベースのクエリが実行されるためです。したがって、例 2 に示すように、NodeList から取得した値をキャッシュすることを検討できます。