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

Question

In my JavaScript, I have two elements.

I have logged the two elements and it shows the following:

Element 1:

Element 2:

The problem is:

• When I console.log the children of each element (element.children) it obviously returns a list of elements.
• But the weird thing is, that one element is empty (and has a length of 0), but has 3 elements (and has a length of 3) once expanded.

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

Element 1 (this one is working as expected):

Element 2 (the problematic one):

Does anyone have any idea what is going on here? How can there be contradictory reports of the number of children?

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

Thanks in advance! All help appreciated.

Thee

Can you create a jsfiddle or make the relevant source code accessible please. – Mite

Answer 1

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:

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

---

But generally: Rather than stumbling around in the dark with a console.log torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.

Diaphane

Thanks for the help! I didn't realize that this was being called before I added elements to the html (through jscript) – Thee

But, how can we get the actual length of array. i.e evaluated length – Etheleneethelin

@MDM - The question is, evaluated when? When you log it? Or later when you look at the object in the console? If you want the length as of when you logged it, log arr.length. If you want it later, when you expand the array in the console, look at the length property in the display of the expanded array. – Diaphane

@MangeshDaundkar you can log children nodeList of cloned DOM node duplicate made at the moment of call: console.log(el.cloneNode(true).children). The clone lives outside document (until appended somewhere) and you'll have the only reference to it, so nothing will be able to mutate it. – Songer

I too faced a similar issues while getting the dom elements in react, then to counter this I used a setTimeout function with a small time interval so that dom elment can only be accessed once it is rendered. – Bingham

@vaibhavnaik - This doesn't have anything to do with whether a DOM element is rendered. Just that the state may have changed between when you log it and when you expand it in the log. – Diaphane

@T.J.Crowder So whats the ideal way to use it in react. Is my workaround a bad code? – Bingham

@vaibhavnaik - Just be aware of what this behavior means. If you need to know the value of an object property as of when it was logged, log the property, not the object as a whole. If you log the object as a whole, again, just be aware that what you see later when you look is what' there when you look, not when you logged it. But my general advice is: Rather than stumbling around in the dark with a console.log torch, turn on the lights using the debugger built into your browser and/or IDE. :-) – Diaphane