Document 對象是 DOM 的標準規范中比較重要的對象之一。該對象提供了訪問和更新 HTML 頁面內容的屬性和方法。 ## Document 對象的作用 Document 對象作為 DOM 訪問和更新 HTML 頁面內容的入口。簡單來說，我們可以把 Document 對象理解為在 DOM 的標準規范中代表 HTML 頁面。（**當然，這種說法并不準確**） Document 對象提供的屬性和方法，可以實現定位 HTML 頁面中的元素，或者創建新的元素等功能。 ## 測試 Document 對象 我們可以通過 `console.log` 方法將 Document 對象打印，測試 Document 對象中提供了哪些屬性和方法: ```javascript console.log(document); ``` 運行 HTML 頁面后，打開 **開發者工具**，我們可以看到以下內容:  我們會發現 `console` 會將 HTML 頁面的源代碼打印出來。這個結果充分地說明了 Document 對象在 DOM 的標準規范中代表整個 HTML 頁面。 換句話講，DOM 訪問和更新 HTML 頁面內容主要依靠 Document 對象作為入口。 ## Document 對象的屬性和方法一覽 在 DOM 的標準規范中，Document 對象的屬性和方法被定義在了 `prototype` 原型中。所以，我們想要查看 Document 對象中具有哪些屬性和方法，可以打印 Document 對象的 `protoype` 進行查看。 ```javascript console.log(Document.prototype); ``` 運行 HTML 頁面后，打開 **開發者工具**，我們可以看到以下內容: ``` URL:(...) activeElement:(...) adoptNode:function adoptNode() anchors:(...) append:function append() applets:(...) baseURI:(...) body:(...) characterSet:(...) charset:(...) childElementCount:(...) childNodes:(...) children:(...) close:function close() contentType:(...) cookie:(...) createAttribute:function createAttribute() createElement:function createElement() createEvent:function createEvent() createExpression:function createExpression() createNSResolver:function createNSResolver() createNodeIterator:function createNodeIterator() createProcessingInstruction:function createProcessingInstruction() createRange:function createRange() createTextNode:function createTextNode() createTreeWalker:function createTreeWalker() currentScript:(...) defaultView:(...) designMode:(...) dir:(...) doctype:(...) documentElement:(...) documentURI:(...) domain:(...) firstChild:(...) firstElementChild:(...) fonts:(...) forms:(...) getElementById:function getElementById() getElementsByClassName:function getElementsByClassName() getElementsByName:function getElementsByName() getElementsByTagName:function getElementsByTagName() getSelection:function getSelection() hasFocus:function hasFocus() head:(...) hidden:(...) images:(...) implementation:(...) importNode:function importNode() inputEncoding:(...) isConnected:(...) lastChild:(...) lastElementChild:(...) lastModified:(...) links:(...) nextSibling:(...) nodeName:(...) nodeType:(...) nodeValue:(...) open:function open() ownerDocument:(...) parentElement:(...) parentNode:(...) prepend:function prepend() previousSibling:(...) querySelector:function querySelector() querySelectorAll:function querySelectorAll() readyState:(...) referrer:(...) registerElement:function registerElement() rootElement:(...) scripts:(...) scrollingElement:(...) selectedStylesheetSet:(...) styleSheets:(...) textContent:(...) title:(...) visibilityState:(...) write:function write() writeln:function writeln() ``` 我們可以看到，Document 對象提供的屬性和方法還是比較多的。但在實際開發中，比較常用的屬性和方法并沒有太多。 > **關于 Document 對象的具體用法，我們在后面的章節中學習。** ## Document 對象的繼承鏈 Document 對象是繼承于 Node 對象的。Node 對象也是 DOM 的標準規范中非常重要的對象之一，而 Node 對象又是繼承于 EventTarget 對象。 我們可以通過以下代碼來測試 Document 對象的繼承鏈: ```javascript console.log(Document.prototype instanceof Node); console.log(Node.prototype instanceof EventTarget); console.log(Document.prototype instanceof EventTarget); ``` Document 對象的屬性和方法多是繼承于 Node 對象和 EventTarget 對象的。當然，也有一部分屬性和方法是實現了 HTMLDocument 接口的。