【EASYDOM系列教程】之Document 对象介绍

JiaXinYi 发布于2019-08-21 11:48 / 1421人阅读

摘要：对象的作用对象作为访问和更新页面内容的入口。这个结果充分地说明了对象在的标准规范中代表整个页面。对象的继承链对象是继承于对象的。对象也是的标准规范中非常重要的对象之一，而对象又是继承于对象。

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 国际许可协议进行许可。

云服务器 GPU云服务器系列之系列之二架构之坑系列 saas系列介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87129.html

【EASYDOM系列教程】之Node介绍

摘要：对象的作用树结构主要是依靠节点进行解析，称为节点树结构。对象的继承链关系对象是继承于对象的，是一个用于接收事件的对象。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Node 对象，该对象主要提供了用于解析 DOM 节点树结构的属性和方法。 Node 对象的作用 DOM 树结构主要是依靠节点进行解析，...

oliverhuang 2019-08-20 18:16 评论0 收藏0
【EASYDOM系列教程】之创建页面元素

摘要：对象提供了可以创建元素节点属性节点和文本节点的方法，方便更新页面中的元素。是返回值，表示创建的元素。最后，通过方法创建属性节点，并设置了属性值为，再将该属性节点添加到新创建的元素中。 Document 对象提供了可以创建元素节点、属性节点和文本节点的方法，方便 DOM 更新 HTML 页面中的元素。创建元素节点 Document 对象提供了 createElement() 方法创建元...

nifhlheimr 2019-08-20 18:04 评论0 收藏0
【EASYDOM系列教程】之定位页面元素

摘要：对象提供了属性和方法实现定位页面元素功能，这也是的标准规范中对象的主要应用之一。是返回值，表示定位元素的集合，是一个集合。定位匹配选择器的第一个元素。方法定位页面元素所返回的集合就是静态集合。 Document 对象提供了属性和方法实现定位页面元素功能，这也是 DOM 的标准规范中 Document 对象的主要应用之一。定位页面元素方法目前 Document 对象提供实现定位页面元...

NotFound 2019-08-20 18:04 评论0 收藏0
【EASYDOM系列教程】之判断节点类型

摘要：对象中提供了和分别可以用于获取指定节点的节点名称节点类型和节点的值。具体的语法结构如下在上述语法结构中，是一个整数，其代表的是节点类型。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Node 对象中提供了 nodeName、nodeType 和 nodeValue 分别可以用于获取指定节点的节点名称、节点类型和节点的值。 DOM 节点树结构中，我们实际开发最常见的节...

CocoaChina 2019-08-20 18:17 评论0 收藏0
【EASYDOM系列教程】索引

摘要：系列教程是一套免费开源，任何人都可以免费学习分享，甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始，我们先来了解是什么的作用，以及浏览器的支持是怎么样的。《EASYDOM》系列教程是一套免费、开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。本文是这套系列教程的索引（也就是目录）: 第一回 DOM 介绍在最开始，我...

yanwei 2019-08-21 11:51 评论0 收藏0