JavaScript - 文档对象

窗口文档对象

document 对象是一个 JavaScript 对象，提供对 HTML 文档所有元素的访问。当 HTML 文档在 Web 浏览器中加载时，它会创建一个 document 对象。它是 HTML 文档的根。

document 对象包含您可以用来获取有关 HTML 元素的详细信息并自定义它们的各种属性和方法。

JavaScript document 对象是 window 对象的一个属性。可以使用 window.document 语法访问它。也可以在不使用 window 对象前缀的情况下访问它。

JavaScript 文档对象属性

JavaScript 文档对象表示整个 HTML 文档，并且它带有一些属性，允许我们与文档交互并操作它。一些常见的文档对象属性如下：

document.title − 获取或设置文档的标题。
document.URL − 返回文档的 URL。
document.body − 返回文档的 <body> 元素。
document.head − 返回文档的 <head> 元素。
document.documentElement − 返回文档的 <html> 元素。
document.doctype − 返回文档的文档类型声明 (DTD)。

这些属性提供了一种方法，可以使用 JavaScript 访问和修改 HTML 文档的不同部分。

示例：访问文档标题

在下面的示例中，我们使用 document.title 属性来访问文档的标题。

<html>
<head>
   <title> JavaScript - DOM Object </title>
</head>
<body>
   <div id = "output">The title of the document is: </div>
   <script>
      document.getElementById("output").innerHTML += document.title;
   </script>
</body>
</html>

输出

The title of the document is: JavaScript - DOM Object

示例：访问文档 URL

在下面的示例中，我们使用了 document.URL 属性来访问页面的当前 URL。

<html>
<head>
   <title> JavaScript - DOM Object </title>
</head>
<body>
   <div id = "output">The URL of the document is: </div>
   <script>
      document.getElementById("output").innerHTML += document.URL;
    </script>
</body>
</html>

输出

The URL of the document is: https://tutorialspoint.com/javascript/javascript_document_object.htm

JavaScript 文档对象方法

JavaScript 文档对象为我们提供了各种方法，允许我们与 HTML 文档交互并操作它。一些常见的文档对象方法如下：

getElementById(id) − 返回具有指定 ID 的元素。
getElementsByClassName(className) − 返回具有指定类名的元素集合。
getElementsByTagName(tagName) − 返回具有指定标签名的元素集合。
createElement(tagName) − 使用指定的标签名创建一个新的 HTML 元素。
createTextNode(text) − 使用指定的文本创建一个新的文本节点。
appendChild(node) − 将节点作为节点的最后一个子节点追加。
removeChild(node) − 从 DOM 中删除子节点。
setAttribute(name, value) − 设置指定元素上属性的值。
getAttribute(name) − 返回元素上指定属性的值。

这些方法使我们能够使用 JavaScript 动态地操作 HTML 文档的结构和内容。

示例：使用其 ID 访问 HTML 元素

在下面的示例中，我们使用 document.getElementById() 方法访问 ID 为“output”的 DIV 元素，然后使用 HTML 元素的 innerHTML 属性显示一条消息。

<html>
<body>
<div id = "result"> </div>
<script>
   // accessing the DIV element.
   document.getElementById("result").innerHTML += 
   "Hello User! You have accessed the DIV element using its id.";
</script>
</body>
</html>

输出

Hello User! You have accessed the DIV element using its id.

示例：向文档添加事件

在下面的示例中，我们使用 document.addEventListener() 方法向文档添加鼠标悬停事件。

<html>
<body>
   <div id = "result">
       <h2> Mouseover Event </h2>
       <p> Hover over here to change background color </p>
    </div>
   <script>
      document.addEventListener('mouseover', function () {
         document.getElementById("result").innerHTML = "Mouseover event occurred.";
      });
   </script>
</body>
</html>

文档对象属性列表

这里，我们列出了文档对象的所有属性。

属性	描述
document.activeElement	获取 HTML 文档中当前获得焦点的元素。
adoptedStyleSheets	将新构造的样式表数组设置为文档。
baseURI	获取文档的绝对基本 URI。
body	设置或获取文档的 <body> 标记。
characterSet	获取文档的字符编码。
childElementCount	获取文档子元素的数量。
children	获取文档的所有子元素。
compatMode	获取一个布尔值，表示文档是否以标准模式呈现。
contentType	返回文档的 MIME 类型。
cookie	获取与文档相关的 Cookie。
currentScript	返回当前正在执行其代码的文档脚本。
defaultView	获取与文档关联的窗口对象。
designMode	更改文档的可编辑性。
dir	获取文档文本的方向。
doctype	获取文档类型声明。
documentElement	获取 <html> 元素。
documentURI	设置或获取文档的位置。
embeds	获取文档的所有嵌入式 (<embed>) 元素。
firstElementChild	获取文档的第一个子元素。
forms	返回文档的 <form> 元素数组。
fullScreenElement	获取正在全屏显示的元素。
fullScreenEnabled	返回布尔值，指示文档中是否启用了全屏。
head	返回文档的 <head> 标记。
hidden	返回一个布尔值，表示文档是否被视为隐藏。
images	返回 <img> 元素的集合。
lastElementChild	返回文档的最后一个子元素。
lastModified	获取文档的上次修改日期和时间。
links	获取所有 <a> 和 <area> 元素的集合。
location	获取文档的位置。
readyState	获取文档的当前状态。
referrer	获取打开当前文档的文档的 URL。
scripts	获取文档中所有 <script> 元素的集合。
scrollingElement	获取对滚动文档的元素的引用。
styleSheets	返回 CSSStyleSheet 对象的样式表列表。
timeLine	表示文档的默认时间线。
title	设置或获取文档的标题。
URL	获取 HTML 文档的完整 URL。
visibilityState	返回布尔值，表示文档的可见性状态。

文档对象方法列表

以下是所有 JavaScript 文档对象方法的列表 -

方法	描述
addEventListener()	用于向文档添加事件侦听器。
adoptNode()	用于从其他文档中采用节点。
append()	将新节点或 HTML 附加到文档的最后一个子节点之后。
caretPositionFromPoint()	返回 caretPosition 对象，其中包含基于作为参数传递的坐标的 DOM 节点。
close()	关闭使用 document.open() 方法打开的输出流。
createAttribute()	创建一个新的属性节点。
createAttributeNS()	使用特定的命名空间 URI 创建一个新的属性节点。
createComment()	使用特定的文本消息创建一个新的注释节点。
createDocumentFragment()	创建一个 DocumentFragment 节点。
createElement()	创建一个新的元素节点以插入网页。
createElementNS()	用于使用特定的命名空间 URI 创建一个新的元素节点。
createEvent()	创建一个新的事件节点。
createTextNode()	创建一个新的文本节点。
elementFromPoint()	从指定的坐标访问元素。
elementsFromPoint()	返回位于指定坐标处的元素数组。
getAnimations()	返回应用于文档的所有动画的数组。
getElementById()	使用 ID 访问 HTML 元素。
getElementsByClassName()	使用类名访问 HTML 元素。
getElementsByName()	使用名称访问 HTML 元素。
getElementsByTagName()	使用标签名访问 HTML 元素。
hasFocus()	根据任何元素或文档本身是否处于焦点返回布尔值。
importNode()	用于从另一个文档中导入节点。
normalize()	删除为空的文本节点，并连接其他节点。
open()	用于打开一个新的输出流。
prepand()	用于在所有节点之前插入特定节点。
querySelector()	用于选择与作为参数传递的 CSS 选择器匹配的第一个元素。
querySelectorAll()	返回 HTML 元素的节点列表，这些元素与多个 CSS 选择器匹配。
removeEventListener()	用于从文档中删除事件侦听器。
replaceChildren()	替换文档的子节点。
write()	用于将文本、HTML 等写入文档。
writeln()	类似于 write() 方法，但将每个语句写入新行。

打印页面