【EASYDOM系列教程】之Document 对象引见

Document 对象是 DOM 的标准规范中比较重要的对象之一。该对象供应了接见和更新 HTML 页面内容的属性和要领。

Document 对象的作用

Document 对象作为 DOM 接见和更新 HTML 页面内容的进口。简朴来讲,我们能够把 Document 对象理解为在 DOM 的标准规范中代表 HTML 页面。(固然,这类说法并不正确

Document 对象供应的属性和要领,能够完成定位 HTML 页面中的元素,或许建立新的元素等功能。

测试 Document 对象

我们能够经由过程 console.log 要领将 Document 对象打印,测试 Document 对象中供应了哪些属性和要领:

console.log(document);

运转 HTML 页面后,翻开 开辟者东西,我们能够看到以下内容:

《【EASYDOM系列教程】之Document 对象引见》

我们会发明 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 国际允许协定举行允许。

《【EASYDOM系列教程】之Document 对象引见》

    原文作者:二月红
    原文地址: https://segmentfault.com/a/1190000010169405
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞