2

Correct me if I am wrong:

I know that document is an object inside window (the global object) and is also called the Document Object Model which contains all the functionalities required to manipulate itself.

However, when I open the console and type window.document, the value returned is an object that does not contain any functions or properties.

It returns #document (I don't understand meaning of the # sign) and when I expand it, it only contains the HTML elements with no functions or properties. But when I type document., a list of suggestions of all the available methods appears.

screenshot of browser console showing available methods on the document object

So why is it that when I type window.document and press Enter, it does not return the DOM with all the functions and properties?

ggorlen
  • 44,755
  • 7
  • 76
  • 106
ezio
  • 359
  • 2
  • 13
  • 1
    You're only seeing what the console wants you to see. If you type `window.document.` (note the final period) you should still get hints about the available properties/functions just as you do with `document.` If you just type `document` and press enter you will get the same result as you do for `window.document` – phuzi Jul 19 '22 at 15:13
  • @phuzi are you suggesting that the document object is a an exception and this is done on purpose and im not missing anything ? – ezio Jul 19 '22 at 15:14
  • 2
    It's not an exception this the default with any DOM node/element. Yes, it's done on purpose – phuzi Jul 19 '22 at 15:15
  • @phuzi okey, do you have any reference for further reading ? – ezio Jul 19 '22 at 15:23
  • MDN is a great reference/starting point for a lot of JavaScript,HTML,CSS although I don't really have a good reference for the console behaviour (doesn't mean there isn't one though) – phuzi Jul 19 '22 at 15:28
  • "why when i type `window.document` and press enter; it does not return the dom with all the functions and properties?" Because you're evaluating a JS expression that is the HTML element. So there's no autocomplete (a browser-specific behavior) involved in that. When you add the period, it's no longer a valid JS expression and browsers will hint how to complete the expression by selecting a property on the object. I'm not quite sure why you find this behavior surprising. The returned value _does_ have those funcs and props, just save it in a variable, then type the var name and a `.` to see. – ggorlen Jul 19 '22 at 16:17
  • @ggorlen "Because you're evaluating a JS expression that is the HTML element. ". im evaluation the dom not an html element. – ezio Jul 19 '22 at 16:46
  • What's the difference? The DOM (document object model) is a collection of objects that represent the HTML structure. They're HTML elements or DOM nodes. I think you're missing the point here--it doesn't actually matter whether it's related to the DOM at all, it's just an object with a property that's either a valid expression or a partial expression. When it's the latter, browsers typically offer autocomplete. When it's the former, it will evaluate the expression and return the result. – ggorlen Jul 19 '22 at 16:47
  • @ggorlen but the DOM is not an HTML element itself so when i call the window.document it is as if the expression evaluates to window.document.firstChild why is that? why it doesn't evaluate to an object that has first child as a property. – ezio Jul 19 '22 at 16:54
  • I don't see that behavior on this page on Chrome. If you type `a = document` then type `a.` to enable autocomplete, you'll see `firstChild` is there pointing to ` ` along with everything else you'd see if you just typed `document.` without an assignment. In other words, the assignment is totally superfluous and nothing magic happens. I think we have terminology confusion: the [DOM is an API](https://developer.mozilla.org/en-US/docs/Glossary/DOM), not an object `document`, which is the root of the HTML node tree. – ggorlen Jul 19 '22 at 16:56
  • @ggorlen what i meant the expected result is not the firstChild, the expected result is printing all the object properties and functions – ezio Jul 19 '22 at 17:02
  • 1
    I think we're going in circles here. I aready explained the behavior and why that doesn't happen. Why should an object display all the properties and functions? Autocomplete only happens when you have an incomplete expression. I've written this a few times already so I think I'll step aside and let someone else who understands what you're asking help out. – ggorlen Jul 19 '22 at 17:05
  • @ggorlen im not talking about autocomplete though i said then i press enter, the returned value is not the complete object it is just the firstChild – ezio Jul 19 '22 at 17:08
  • Like I said, I'm not seeing that behavior. When I type `document` and press enter, I see `#document`. When I type `document.firstChild` and press enter, I see ` `. Those are two different things. – ggorlen Jul 19 '22 at 17:12
  • let me show an example. you can type `"some string"` in console and it'd not list it's members. but if you type `"some string".` it shows what you can do. (disclaimer: I did't read through all comments carefully) – apple apple Jul 19 '22 at 17:15
  • @ggorlen type window.document and press enter and screenshot it please, if it returns a complete object with all the available properties then this is a browser specific issue, as you can see in my post, i screenshot my answer and it returns #document and when i expand it there are no functions or properties such getElementById – ezio Jul 19 '22 at 17:16
  • @ggorlen I think you may mistake me as OP :P. – apple apple Jul 19 '22 at 17:17
  • @appleapple Oh, sorry. – ggorlen Jul 19 '22 at 17:18
  • 1
    @ezio I see the same thing as your screenshot. As I said, this is unsurprising and normal behavior as far as I can tell. – ggorlen Jul 19 '22 at 17:19
  • @ggorlen great now that you do know that this isn't about autocomplete, why would the returned value does not contain all the details about the document such as all the avilable functions and properties? – ezio Jul 19 '22 at 17:20
  • 1
    I've already been over this multiple times. The return value _does have all of the functions and properties_! It's literally the _exact same object_. Type `a = document` and then type `a.` and you'll see all of the functions and properties. I think you're confused by the way Chrome prints DOM nodes, the `#document` and ` ` formatting. This is just a browser-specific representation of the object, not the actual returned object. – ggorlen Jul 19 '22 at 17:21
  • @ggorlen "The return value does have the functions and properties! It's literally the exact same object", why not show them when i press enter after typing window.document? and is document a dom node? isn't document the DOM! – ezio Jul 19 '22 at 17:24
  • 1
    Lol. We keep going in circles and making no progress. Please just re-read all of my posts... I've already answered those questions multiple times. "Why not show them..." because Chrome only shows the functions and properties when it's autocompleting but not when you press enter or if you have a valid JS expression that you have typed but not yet pressed enter. It displays objects in its own format that usually doesn't show properties or functions, especially for DOM nodes. – ggorlen Jul 19 '22 at 17:25
  • i will, so far @phuzi answer makes sense – ezio Jul 19 '22 at 17:26
  • 1
    Phuzi has said the same thing as me. – ggorlen Jul 19 '22 at 17:26
  • @ggorlen if he did, then he gave a concise more clear answer for me, no offense, but thank you for your effort – ezio Jul 19 '22 at 17:31
  • @ggorlen if you have read carefully then you would have noticed that i asked for a reference and that is what is missing, his answer makes sense so far but it is not a final answer, so there is still a possibility where his answer is wrong. there is still some confusion that needs to be resolved. – ezio Jul 19 '22 at 17:36
  • I think part of the confusion is this: you may think that the thing that Chrome prints that starts with the `#document` is somehow supposed to be the complete object--"the value returned". This `#document` thing with the dropdown arrow next to it is not the value returned. It's a _browser-specific representation of the value (an object) returned_. The actual, programmatic value/object returned has all of the properties you expect (as my `a = document` demo above demonstrates), but the browser-specific representation does not show them by design. Does this make sense? – ggorlen Jul 19 '22 at 17:39
  • 1
    Maybe [How do I view the properties of a DOM object in Chrome Developer?](https://stackoverflow.com/questions/11380602/how-do-i-view-the-properties-of-a-dom-object-in-chrome-developer) and [Viewing DOM Elements as Objects in Chrome debugger](https://stackoverflow.com/questions/13145199/viewing-dom-elements-as-objects-in-chrome-debugger) are relevant. – ggorlen Jul 19 '22 at 17:42
  • @ggorlen your link answered the question, when i use console.dir(document) it shows the complete object, console.log automatically recognize document as something that should be represented as html and returns the approprite node. thank you – ezio Jul 19 '22 at 17:46
  • 1
    Yes. Glad we made it there. Yes, `console.log()` formats objects different than they actually are. – ggorlen Jul 19 '22 at 17:48
  • 1
    @ggorlen thank you so much i appreciate your effort. – ezio Jul 19 '22 at 17:49

1 Answers1

3

I know that document is an object inside window (the global object) and is also called the Document Object Model which contains all the functionalities required to manipulate itself.

My understanding is that the Document Object Model is a broader API than just the document object, which is "the entry point to the page's content" according to MDN.

However, when I open the console and type window.document, the value returned is an object that does not contain any functions or properties.

That's not true. The value returned does have all of the functions and properties of document; in fact, it's the exact document object. You're probably confusing the browser-specific representation shown in your screenshot starting with #document with the actual return value.

You can prove this to yourself with an assignment: foo = document. Then type foo. on the next line and the exact same autocomplete will appear that shows when you type document. directly, because foo is just an alias of document. You can call foo.querySelector("p") and it'll work just fine. If you type foo or document and press Enter, you'll see the abbreviated #document representation.

In Firefox 102.0.1, the same code (typing document and pressing Enter) shows something else:

screenshot of firefox console showing all methods and properties of the document object

Even though it looks different, all of the programmatic logic you might perform on the returned value will work just the same as Chrome (notwithstanding the normal browser-specific implementation differences of the ECMAScript spec).

I don't understand the meaning of the # sign

The # is a Chrome-specific way of denoting the element as a "virtual" element that you can't select. It's used in the element tree and for frames and shadow roots. As you can see from the Firefox screenshot above, no # appears.

and when I expand it, it only contains the HTML elements with no functions or properties. But when I type document., a list of suggestions of all the available methods appears.

For whatever reason, Chrome has decided that showing the HTML tree is a more useful representation of a DOM object for console.log rather than the properties and methods of the object. (console.log is automatically invoked on whatever expression you run in the console)

To see the object displayed in a similar format as the Firefox screenshot above, use console.dir(document). This seems to be more like what you were expecting, showing that the return value indeed has all of the properties and methods of document.

Don't confuse how browsers choose to display information in console.log() with what the variables and objects actually represent in the program. These are two totally different things, and browsers often elide many properties from things that are logged, present them as very different from the typical JSON representation you might expect, or live-update the logged object, leading to confusion.

See What does a key value pair inside the square brackets [] mean? for a further dive into the implementation-defined nature of logging:

An object with generic JavaScript object formatting is a potentially expandable representation of a generic JavaScript object. An object with optimally useful formatting is an implementation-specific, potentially-interactive representation of an object judged to be maximally useful and informative.

Used in this post: Chrome 103.0.5060.114 (Official Build) (64-bit)

ggorlen
  • 44,755
  • 7
  • 76
  • 106