HTML DOM 之 document

139 阅读4分钟

Document 对象

当 HTML 文档加载到 Web 浏览器中时,它就变成了一个文档对象

文档对象是 HTML 文档的根节点。

文档对象窗口对象的属性。

通过以下方式访问文档对象

window.document 或仅用 document

文档对象属性和方法

以下属性和方法可用于 HTML 文档:

属性 / 方法描述
all[]返回对文档中所有 HTML 元素的引用。
activeElement返回文档中当前获得焦点的元素。
addEventListener()将事件处理程序附加到文档。
adoptNode()采用来自另一个文档的节点。
anchors已弃用。
applets已弃用。
baseURI返回文档的绝对基准 URI。
body设置或返回文档的正文( 元素)。
charset已弃用。
characterSet返回文档的字符编码。
close()关闭之前用 document.open() 打开的输出流。
cookie返回文档中所有 cookie 的名称/值对。
createAttribute()创建属性节点。
createComment()创建带有指定文本的 Comment 节点。
createDocumentFragment()创建空 DocumentFragment 节点。
createElement()创建元素节点。
createEvent()创建新事件。
createTextNode()创建文本节点。
defaultView返回与文档关联的窗口对象,若无可用,则返回 null。
designMode控制整个文档是否应可编辑。
doctype返回与文档关联的文档类型声明。
documentElement返回文档的 Document 元素( 元素)。
documentMode已弃用。
documentURI设置或返回文档的位置。
domain返回加载文档的服务器的域名。
domConfig已弃用。
embeds返回文档中所有 元素的集合。
execCommand()已弃用。
forms返回文档中所有 元素的集合。
getElementById()返回拥有指定值的 ID 属性的元素。
getElementsByClassName()返回包含拥有指定类名的所有元素的 HTMLCollection
getElementsByName()返回包含拥有指定名称的所有元素的活动 NodeList
getElementsByTagName()返回包含拥有指定标签名称的所有元素的 HTMLCollection
hasFocus()返回布尔值,指示文档是否获得焦点。
head返回文档的 元素。
images返回文档中所有 元素的集合。
implementation返回处理此文档的 DOMImplementation 对象。
importNode()从另一个文档导入节点。
inputEncoding已弃用。
lastModified返回文档最后一次修改的日期和时间。
links返回文档中所有拥有 href 属性的 和 元素的集合。
normalize()删除空文本节点,并连接相邻节点。
normalizeDocument()已弃用。
open()打开 HTML 输出流以收集来自 document.write() 的输出。
querySelector()返回与文档中指定的 CSS 选择器匹配的第一个元素。
querySelectorAll()返回包含与文档中指定的 CSS 选择器匹配的所有元素的静态 NodeList。
readyState返回文档的(加载)状态。
referrer返回加载当前文档的文档的 URL。
removeEventListener()从文档中删除事件处理程序(已使用 addEventListener() 方法 附加的)。
renameNode()已弃用。
scripts返回文档中
strictErrorChecking已弃用。
title设置或返回文档的标题。
URL返回 HTML 文档的完整 URL。
write()将 HTML 表达式或 JavaScript 代码写入文档。
writeln()与 write() 相同,但在每条语句后添加换行符。

例子

image.png

image.png

Document 对象描述

HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代,但是仍然常常使用,因为他们很方便。

write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。

注意,在 1 级 DOM 中,HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中,该方法已经被转移到了 Document 接口,它现在由 HTMLDocument 继承而不是由它定义了。