Document 對象是 DOM 的標準規範中比較重要的對象之一。該對象提供了訪問和更新 HTML 頁面內容的屬性和方法。javascript
Document 對象做爲 DOM 訪問和更新 HTML 頁面內容的入口。簡單來講,咱們能夠把 Document 對象理解爲在 DOM 的標準規範中表明 HTML 頁面。(固然,這種說法並不許確)java
Document 對象提供的屬性和方法,能夠實現定位 HTML 頁面中的元素,或者建立新的元素等功能。node
咱們能夠經過 console.log
方法將 Document 對象打印,測試 Document 對象中提供了哪些屬性和方法:cookie
console.log(document);
運行 HTML 頁面後,打開 開發者工具,咱們能夠看到如下內容:app
咱們會發現 console
會將 HTML 頁面的源代碼打印出來。這個結果充分地說明了 Document 對象在 DOM 的標準規範中表明整個 HTML 頁面。dom
換句話講,DOM 訪問和更新 HTML 頁面內容主要依靠 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 對象提供的屬性和方法仍是比較多的。但在實際開發中,比較經常使用的屬性和方法並無太多。spa
關於 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 國際許可協議進行許可。