David Callanan David Callanan - 3 months ago 25
Javascript Question

console.log of element.children shows 0 length but has three entries when expanded later

In my javascript, I have two elements.

I have logged the two elements and it shows...

Element 1.

enter image description here

Element 2.

enter image description here

There are problem.

When I

they obviously return some

You will understand what the following means in a minute: But the weird thing is, that one HtmlCollection is empty (and has a length of 0), but has 3 elements (and has a length of 3).

If you read the
s below for the children of the elements, you will understand what I am talking about...

Element 1 children & length:

enter image description here

Element 2 children & length: (the messed up one)

enter image description here

Does anyone have any idea what is going on here?

How do I fix this, I need to loop trough the HtmlCollection, but it won't let me because length is 0...?

Thanks in advance!
All help appreciated.


When you log objects to the console, the object's current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.

So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you're doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body> tag.

The very subtle blue (i) icon next to the object has a tooltip that's useful; if you hover it you see:

Tooltip saying "Object value at left was shapshotted when logged, value below was evaluated just now."

It says "Object value at left was shapshotted when logged, value below was evaluated just now."