Noob question about runtime and DOM stuff

[ShrimpTacos314]

When running .appendChild on the body tag, we use document.body.appendChild(foo). (Just pretend someone actually has a variable named foo in their JavaScript, ha ha.) So, according to my puny brain, that syntax should work for any element: document.bar.appendChild(foo). So how come that causes a runtime error, while bar.appendChild(foo) doesn't?

[vlwkaos]

document is a property of host object window which is a global object of a browser. The document object refers to the HTMLdocument object of the currently opened html file. And as HTML has a structure of head and body, you can access body element as a property of document object and this is just how the object is implemented by specification. (correct me if I am wrong). The document do hold the HTMLElement you appended to the body, but not a direct reference to it. You might want to open a console F12 and type in document and expand on it to see the properties.

So if you try to access bar from document, it is not there since it is not a property of the document object.
If you create an element and assign it to a variable foo, foo holds reference to the element you just created, hence you can access properties and methods defined in foo (assuming you created it using document.createElement('tagName') it will inherit its properties and methods from HTMLElementPrototype, for more information I suggest you look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

I hope this answers your question!