why does console.log(document.body) give different looking result?

Question

I embedded console.log(document.body) at my local page for learning purpose and when I hit refresh it displayed properties of body element like baseURL, innerHTML, etc... rather than its content. Why is this happening? (I am using Chrome43)

Answer 1

In JavaScript and the DOM, document.body is an object, and when you log it with console, Chrome is displaying displaying the object, which includes all of its properties. The content of document.body can be found in the innerHTML property and accessible via other properties as well.

Chrome may be displaying the object properties instead of the DOM tree if there's a race condition and console.log(document.body) is fired prior to the completion of the DOM tree.

If you need the DOM tree, then try logging document.body after the body loads.