JavaScript - document 文档对象
Window document 文档对象
document 对象是一个 JavaScript 对象，它提供对 HTML 文档所有元素的访问。当 HTML 文档在 Web 浏览器中加载时，它会创建一个 document 对象。它是 HTML 文档的根。
document 对象包含各种属性和方法，您可以使用它们来获取 HTML 元素的详细信息并对其进行自定义。
JavaScript 文档对象是 window 对象的一个属性。可以使用 window.document 语法访问它。也可以在不添加 window 对象前缀的情况下访问它。
JavaScript 文档对象属性
JavaScript 文档对象代表整个 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 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://www.cainiaomax.com/javascript/javascript_document_object.htm
JavaScript 文档对象方法
JavaScript 文档对象为我们提供了各种方法，使我们能够与 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 +=
"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 | 设置或获取文档 标签。 |
| characterSet | 获取文档的字符编码。 |
| childElementCount | 获取文档子元素的数量。 |
| children | 获取文档的所有子元素。 |
| compatMode | 获取一个布尔值，表示文档是否以标准模式呈现。 |
| contentType | 返回文档的 MIME 类型。 |
| 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() | 使用 class 访问 HTML 元素名称。 |
| getElementsByName() | 使用名称访问 HTML 元素。 |
| getElementsByTagName() | 使用标签名称访问 HTML 元素。 |
| hasFocus() | 根据元素或文档本身是否处于焦点状态返回布尔值。 |
| importNode() | 用于从另一个文档导入节点。 |
| normalize() | 删除空的文本节点，并连接其他节点。 |
| open() | 用于打开一个新的输出流。 |
| prepand() | 用于在所有节点之前插入特定节点。 |
| querySelector() | 用于选择与作为参数传递的 CSS 选择器匹配的第一个元素。 |
| querySelectorAll() | 返回与多个 CSS 选择器匹配的 HTML 元素的节点列表。 |
| removeEventListener() | 用于从文档。 |
| replaceChildren() | 替换文档的子节点。 |
| write() | 用于将文本、HTML 等写入文档。 |
| writeln() | 它类似于 write() 方法，但将每个语句写入新行。 |
