概述
HTML DOM 文档对象拥有网页中的所有对象。它代表了网页。当网页在浏览器中加载时，会创建一个 HTML DOM document 对象。它是 HTML 文档的根节点。
DOM 文档对象包含多种属性和方法，可以用来获取有关 HTML 元素的信息以及定制它们。通过文档对象，JavaScript 可以访问并改变文档的结构、内容或样式。
要访问任何 HTML 元素，应该始终从 DOM 文档对象开始访问。
访问 DOM 文档对象
网页以 DOM 文档对象的形式呈现。如果我们想要访问网页中的任何元素，我们需要首先访问文档对象。在 JavaScript 中，文档对象是 window 对象的一个属性。所以我们可以通过 window.document 的语法作为 window 对象的属性来访问文档对象。我们也可以不写 window 直接访问。
window.document
或者简单地
document
DOM 文档对象的属性
HTML DOM 文档对象提供了许多可以用来访问和操作 HTML 元素的属性。
下面列出了文档对象的所有属性：
| 属性 |
描述 |
| 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 |
返回一个布尔值，表示文档的可见状态。 |
这里解释了一些 HTML DOM document 对象的属性，并提供了 JavaScript 示例。
document 的 childElementCount 属性
在 JavaScript 中，document 对象的 childElementCount 属性返回文档子元素的数量。
语法
使用 document 对象的 childElementCount 属性，请遵循以下语法：
document.childElementCount;
示例
在下面的代码中，childElementCount 属性返回 1，因为文档只包含 1 个子元素 <body>。其他的 HTML 元素都是 <body> 的子元素。
<html>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<div id="output"></div>
<script>
document.getElementById('output').innerHTML =
"Total number of child elements in the document is: " + document.childElementCount;
</script>
</body>
</html>
输出
First Element
Second Element
Third Element
Total number of child elements in the document is: 1
document 的 links 属性
Document Links 属性返回文档中所有链接的集合。之后，可以使用 for...of 循环遍历链接集合。
语法
使用 document 的 links 属性，请遵循以下语法：
document.links;
示例
在下面的代码中，网页包含两个 <a> 元素。我们使用 links 属性访问它们的 href 属性值。
之后，我们使用 for...of 循环遍历链接集合并在网页上打印它们。
<html>
<body>
<div><a href="https://tutorialspoint.com/">Home</a></div>
<div><a href="https://www.tutorialspoint.com/articles/category/javascript">JavaScript</a></div>
<div id="output"></div>
<script>
const allLinks = document.links;
document.getElementById("output").innerHTML += "The webpage contains the below links. <br>";
for (let link of allLinks) {
output.innerHTML += link.href + "<br>";
}
</script>
</body>
</html>
输出
Home
JavaScript
The webpage contains the below links.
https://tutorialspoint.com/
https://www.tutorialspoint.com/articles/category/javascript
document 的 title 属性
在 JavaScript 中，DOM 文档的 title 属性返回网页的标题。
语法
要访问网页的 DOM 文档标题，请遵循以下语法：
document.title;
示例
在下面的代码中，我们在 <head> 标签中添加了 <title> 标签。
之后，我们使用 document 的 title 属性访问网页的标题。
<html>
<head>
<title>JavaScript - HTML DOM Document</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 - HTML DOM Document