1、Document 对象概述
Document 对象代表浏览器窗口中的文档，该对象是 Window 对象的子对象。由于 Window 对象是 DOM 对象模型中的默认对象，因此其方法和子对象不需要使用 Window 来引用。通过 Document 对象可以访问 HTML 文档中的任何 HTML 标记，并可以动态地改变 HTML 标记中的内容，如表单、图像、表格和超链接等。Document 对象在 JavaScript 1.0 版本中就已经存在，在随后的版本中又增加了几个属性和方法。
Document 对象的层次结构如图：
2、Document 对象的常用属性
Document 对象的常用属性及其说明：
| 属性 | 说明 |
|---|---|
| body | 提供对 <body> 元素的直接访问。 |
| cookie | 获取或设置与当前文档有关的所有 cookie。 |
| domain | 获取当前文档的域名。 |
| lastModified | 获取文档被最后修改的日期和时间。 |
| referrer | 获取载入当前文档的文档的 URL。 |
| title | 获取或设置当前文档的标题。 |
| URL | 获取当前文档的 URL。 |
【示例】使用 Document 对象的常用属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="pan_junbiao的博客">
<title></title>
</head>
<body>
<h3>您好，欢迎访问 pan_junbiao的博客</h3>
<h3>https://blog.csdn.net/pan_junbiao</h3>
<p id="state"></p>
<p id="domain"></p>
<p name="url"></p>
</body>
</html>
<script type="text/javascript">
window.onload = function () {
//设置文档的背景色和前景色
document.body.style.backgroundColor = "#B0E0E6";
document.body.style.color = "green";
//设置动态标题栏
document.title = "Document 对象的常用属性";
//获取当前文档的状态
let state = document.readyState;
document.getElementById("state").innerText = "文档状态：" + state;
//获取域名
let domain = document.domain;
document.getElementById("domain").innerText = "获取域名：" + domain;
//获取URL
let url = document.URL;
document.getElementsByName("url")[0].innerText = "获取URL：" + url;
}
</script>执行结果：
3、Document 对象的常用方法
Document 对象的常用方法以及说明：
| 方法 | 说明 |
|---|---|
| getElementById() | 返回指定id的对象，例如，获取 id="userName" 的元素。 |
| getElementsByName() | 返回带有指定名称的对象集合，例如，为所有 name="hobby" 的元素集合。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合，如所有 <div> 元素。 |
| getElementsByClassName() | 通过类名返回集合，但 IE8 及以下需兼容处理。 |
| createElement() | 动态添加 HTML 标记。 |
| write() | 向文档中写入HTML或JavaScript语句。 |
| writeln() | 向文档中写入HTML或JavaScript语句，并以换行符结束。 |
| open() | 打开一个文档输出流并接收write和writeln方法创建页面内容 |
| close() | 关闭用 document.open() 方法打开的输出流。 |
3.1 getElementById() 方法
getElementById() 方法返回拥有指定 id 值的元素。如果元素不存在，getElementById() 方法将返回 null。getElementById() 方法是 HTML DOM 中最常用的方法之一。几乎每次您想要读取或编辑 HTML 元素时，都会使用它。
详细使用，请点击并浏览本博客的文章：