【EASYDOM系列教程】之Document 對象介紹

Document 對象是 DOM 的標準規範中比較重要的對象之一。該對象提供了訪問和更新 HTML 頁面內容的屬性和方法。

Document 對象的做用

Document 對象做爲 DOM 訪問和更新 HTML 頁面內容的入口。簡單來講，咱們能夠把 Document 對象理解爲在 DOM 的標準規範中表明 HTML 頁面。（固然，這種說法並不許確）

Document 對象提供的屬性和方法，能夠實現定位 HTML 頁面中的元素，或者建立新的元素等功能。

測試 Document 對象

咱們能夠經過 console.log 方法將 Document 對象打印，測試 Document 對象中提供了哪些屬性和方法:

console.log(document);

運行 HTML 頁面後，打開 開發者工具，咱們能夠看到如下內容:

咱們會發現 console 會將 HTML 頁面的源代碼打印出來。這個結果充分地說明了 Document 對象在 DOM 的標準規範中表明整個 HTML 頁面。

換句話講，DOM 訪問和更新 HTML 頁面內容主要依靠 Document 對象做爲入口。

Document 對象的屬性和方法一覽

在 DOM 的標準規範中，Document 對象的屬性和方法被定義在了 prototype 原型中。因此，咱們想要查看 Document 對象中具備哪些屬性和方法，能夠打印 Document 對象的 protoype 進行查看。

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 對象的繼承鏈:

console.log(Document.prototype instanceof Node);
console.log(Node.prototype instanceof EventTarget);

console.log(Document.prototype instanceof EventTarget);

Document 對象的屬性和方法可能是繼承於 Node 對象和 EventTarget 對象的。固然，也有一部分屬性和方法是實現了 HTMLDocument 接口的。

---

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。