element.children の Console.log に長さ 0 が表示されるが、後で展開すると 3 つのエントリがある

プログラミングにおけるオブジェクトの状態の理解重要です。 console.log を使用して要素を検査する場合、オブジェクトがどのように表示されるかを認識することが重要です。

console.log は、オブジェクトの現在の状態に基づいて表示を動的に更新します。最初に、要素の子 (element.children) をログに記録すると、長さ 0 の配列が返されます。ただし、後でログに記録されたオブジェクトをコンソールで展開すると、オブジェクトの現在の状態が取得されます。これには、3 つの状態が含まれる場合があります。 events.

この動作は、console.log がオブジェクトの状態のスナップショットを取得するのではなく、オブジェクトへのライブ参照を確立するという事実によるものです。したがって、オブジェクトの状態が変化すると、ログに記録されたオブジェクトには、その変更がコンソールに反映されます。

この問題を解決するには、コレクションにデータが設定されるまで待ってから、コードをログに記録したり実行したりすることを検討してください。たとえば、スクリプトの実行直後に子のログを記録する場合は、スクリプトを HTML ドキュメントの末尾、終了

さらに、に組み込まれているデバッガーを使用します。ブラウザまたは IDE を使用して、実行中のオブジェクトの状態をより深く理解できます。これにより、オブジェクトの動作が明らかになり、問題を正確に特定するのに役立ちます。