网站开发定制方案企业网店推广运营策略
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;//获取URLlet 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 元素时，都会使用它。
详细使用，请点击并浏览本博客的文章：