JavaScript Document 对象

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

document 对象包含了各种属性和方法，可以用来获取 HTML 元素的详情并自定义它们。

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

JavaScript Document 对象属性

JavaScript Document 对象代表整个 HTML 文档，并带有一系列允许我们与其互动和操控的属性。一些常见的 Document 对象属性如下：

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 对象</title>
</head>
<body>
   <div id="output">文档的标题是:</div>
   <script>
      document.getElementById("output").innerHTML += document.title;
   </script>
</body>
</html>

输出：

文档的标题是: JavaScript - DOM 对象

示例：访问文档 URL

在下面的例子中，我们使用 document.URL 属性来获取当前页面的 URL。

<html>
<head>
   <title>JavaScript - DOM 对象</title>
</head>
<body>
   <div id="output">文档的 URL 是:</div>
   <script>
      document.getElementById("output").innerHTML += document.URL;
   </script>
</body>
</html>

输出：

文档的 URL 是: https://www.tutorialspoint.com/javascript/javascript_document_object.htm

JavaScript Document 对象方法

JavaScript Document 对象提供了多种方法让我们能够与其互动和操控 HTML 文档。一些常见的 Document 对象方法如下：

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>
   // 访问 DIV 元素
   document.getElementById("result").innerHTML +=
   "你好 用户！你已经使用其 ID 访问了这个 DIV 元素。";
</script>
</body>
</html>

输出：

你好 用户！你已经使用其 ID 访问了这个 DIV 元素。

示例：向文档添加事件

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

<html>
<body>
   <div id="result">
       <h2> 鼠标悬停事件 </h2>
       <p> 将鼠标悬停在此处以更改背景颜色 </p>
    </div>
   <script>
      document.addEventListener('mouseover', function () {
         document.getElementById("result").innerHTML = "鼠标悬停事件发生了。";
      });
   </script>
</body>
</html>

Document 对象属性列表

下面列出了 document 对象的所有属性：

属性	描述
`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`	返回一个布尔值，表示文档的可见状态。

Document 对象方法列表

以下是所有 JavaScript document 对象方法的列表：

addEventListener() - 用于向文档添加事件监听器。
adoptNode() - 用于从其他文档采用节点。
append() - 在文档的最后一个子节点后附加新的节点或 HTML。
caretPositionFromPoint() - 基于作为参数传递的坐标返回 caretPosition 对象。
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() - 返回匹配多个 CSS 选择器的 HTML 元素的 nodelist。
removeEventListener() - 用于从文档移除事件监听器。
replaceChildren() - 替换文档的子节点。
write() - 用于将文本、HTML 等写入文档。
writeln() - 类似于 write() 方法，但在新行中写入每个语句。