【温故而知新】JavaScript的Document对象

一、概念

Document对象是JavaScript中代表整个HTML或XML文档的根节点。它是浏览器中内置的一个对象，可以通过document关键字来访问。

Document对象提供了许多属性和方法，用于操作和访问文档中的元素、样式、事件等。一些常用的属性和方法包括：

• document.getElementById(id)：根据元素的id属性获取元素对象。
• document.getElementsByClassName(className)：根据元素的类名获取元素对象集合。
• document.getElementsByTagName(tagName)：根据元素的标签名获取元素对象集合。
• document.createElement(tagName)：创建一个指定标签名的新元素。
• document.createTextNode(text)：创建一个包含指定文本内容的新文本节点。
• document.querySelector(selector)：根据指定的CSS选择器获取第一个匹配的元素对象。
• document.querySelectorAll(selector)：根据指定的CSS选择器获取所有匹配的元素对象集合。
• document.title：获取或设置文档的标题。
• document.body：获取文档的body元素对象。
• document.head：获取文档的head元素对象。

通过Document对象，我们可以动态地修改和操作HTML或XML文档的内容、结构和样式，使得网页可以根据用户的交互行为进行动态更新和改变。

二、案例

以下是一些常见的使用Document对象的案例代码：

1. 获取元素并修改内容：

// 获取id为myElement的元素对象
var element = document.getElementById("myElement");

// 修改元素的文本内容
element.innerHTML = "新的内容";

2. 创建新元素并添加到文档中：

// 创建一个新的p元素
var newElement = document.createElement("p");

// 创建一个文本节点
var textNode = document.createTextNode("这是一个新的段落。");

// 将文本节点添加到新元素中
newElement.appendChild(textNode);

// 将新元素添加到body元素中
document.body.appendChild(newElement);

3. 添加事件监听器：

// 获取id为myButton的按钮元素对象
var button = document.getElementById("myButton");

// 添加点击事件监听器
button.addEventListener("click", function() {
  // 在点击按钮时执行的代码
  console.log("按钮被点击了！");
});

4. 获取表单输入值：

<input type="text" id="myInput" value="默认值">
<button id="myButton">获取值</button>

// 获取id为myButton的按钮元素对象
var button = document.getElementById("myButton");

// 添加点击事件监听器
button.addEventListener("click", function() {
  // 获取id为myInput的输入框元素对象
  var input = document.getElementById("myInput");
  
  // 获取输入框的值
  var value = input.value;
  
  // 在控制台输出值
  console.log(value);
});

通过Document对象，我们可以对文档进行动态操作，实现丰富的交互效果和功能。

三、属性

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln()
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener()
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

四、后记

JavaScript是一种广泛应用于网页开发的脚本语言，它可以用来为网页添加交互性和动态特效。JavaScript可以在网页中直接嵌入，也可以作为外部文件引用。

以下是JavaScript的一些重要特点和用法：

1. 脚本语言：JavaScript是一种解释型脚本语言，不需要编译，可以直接在浏览器中执行。
2. 弱类型语言：JavaScript是一种弱类型语言，变量的数据类型可以随时改变，不需要声明变量的类型。
3. 事件驱动：JavaScript可以通过监听用户的操作或者其他事件触发特定的代码执行，实现网页的交互性。
4. DOM操作：JavaScript可以通过文档对象模型（DOM）来操作网页的HTML元素，可以动态地添加、修改和删除元素。
5. 表单验证：JavaScript可以通过表单验证来确保用户输入的数据符合要求，提供更好的用户体验。
6. AJAX：JavaScript可以通过AJAX技术实现网页的异步加载，可以在不刷新整个页面的情况下更新部分内容。
7. JSON：JavaScript Object Notation（JSON）是一种轻量级的数据交换格式，JavaScript可以很方便地解析和生成JSON数据。
8. 库和框架：JavaScript拥有丰富的库和框架，如jQuery、React、Angular等，可以简化开发过程并提供更强大的功能。

JavaScript是一种强大且灵活的语言，可以用来创建复杂的交互式网页，并且可以与HTML和CSS无缝配合，实现出色的用户体验。

五、热门文章

【温故而知新】JavaScript的BOM之Screen/Location/History对象
【温故而知新】JavaScript的BOM之Navigator对象
【温故而知新】JavaScript的BOM之Window对象
【温故而知新】JavaScript数据结构详解
【温故而知新】JavaScript数据类型
RESTful API，如何构建 web 应用程序
jQuery实现轮播图代码
vue实现文本上下循环滚动
Vue运用之input本地上传文件，实现传参file:(binary)
js判断各种浏览器
uni-app详解、开发步骤、案例代码