JavaScript中的document到底是什么？为何浏览器控制台输入document显示页面源码而非对象方法属性？

Great question—this is one of those tiny console quirks that trips up a lot of new developers, so let’s break it down clearly:

First, let’s get the basics straight:

• document is definitely an object in JavaScript. It’s the root of the DOM (Document Object Model) for your current webpage, and it lives as a property of the global window object. That’s exactly why you see it listed when you log window or this in the browser console.
  

Now, why does typing document directly show you the page source instead of the object’s methods and properties? That’s just the browser console being helpful (maybe a little too helpful sometimes):

• Browsers optimize the console display for common objects. Since document represents the entire page, the console automatically renders its HTML representation (the source code) because that’s what developers often want to inspect quickly.
• If you want to see the actual object structure—all its built-in methods like getElementById() or properties like title—you have two easy fixes:
  • Right-click the displayed HTML in the console and select an option like "Show object properties" (exact wording varies by browser)
  • Use console.dir(document) instead. This command explicitly tells the console to show you the object’s hierarchy, not its rendered HTML.
    

To wrap it up: document is a core DOM object that lets you interact with every part of your webpage. The console just hides its object details by default to show you the HTML view first—underneath all that, it’s a fully-featured object packed with tools for manipulating the page.

内容的提问来源于stack exchange，提问作者Shubham Tank