console.log von element.children zeigt 0 Länge aber hat drei Einträge, wenn später erweitert

Question

In meinem Javascript habe ich zwei Elemente.

ich die beiden Elemente angemeldet haben, und es zeigt ...

Element 1.

Element 2.

Es gibt Problem.

Als ich console.log die element s .children sie einige offensichtlich zurückkehren HtmlCollection s

Sie werden verstehen, was die folgenden Mittel in einer Minute: Aber das Seltsame ist, dass ein HtmlCollection leer ist (und hat eine Länge von 0), hat aber 3 Elemente (und hat eine Länge von 3).

Wenn Sie die console.log s unten für die Kinder der Elemente lesen, werden Sie verstehen, was ich rede ...

Element 1 Kinder & Länge:

Element 2 Kinder & Länge: (die verkorkste ein)

Hat jemand eine Idee, was hier vor sich geht?

Wie behebe ich das, ich muss durch die HtmlCollection Schleife, aber es wird mich nicht lassen, weil die Länge 0 ist ...?

Vielen Dank im Voraus! Alle Hilfe geschätzt.

Answer 1

Wenn Sie Objekte an der Konsole protokollieren, wird der aktuelle Status des Objekts nicht als Snapshot angezeigt und angezeigt (wie zu erwarten); Stattdessen erhält die Konsole eine Live-Referenz für das Objekt. Wenn Sie es in der Konsole erweitern, sehen Sie seinen Inhalt von , wenn Sie es erweitern, nicht ab wann Sie es protokollierten. Mehr dazu in this question and its answers.

So offensichtlich sind Ihre Sammlungen leer, wenn Sie Ihre Protokollierung durchführen, und dann ihre Elemente später erhalten. Sie möchten nur Ihren Code warten lassen, bis die Sammlungen gefüllt sind. Wenn Sie dies zum Beispiel sofort bei der Ausführung Ihres Skripts tun, sollten Sie das Skript am Ende des Dokuments direkt vor dem schließenden Tag platzieren.

Das sehr subtile blaue (i) Symbol neben dem Objekt hat einen Tooltip, der nützlich ist; wenn Sie es schweben Sie sehen:

Er sagt: „Objektwert links shapshotted wurde, als angemeldet, Wert unterhalb wurde gerade ausgewertet."