9.2 DOM的基础
9.2.1 标签、元素、节点
在对 HTML 以及 DOM 进行讨论时，我们常常会混用标签、元素、节点等术语。故在此再次对它们的定义进行确认。
标签
标签是一种用于标记的字符串，其作用为对文档的结构进行指定。通常都会有起始标签与结束标签。在结束标签中，有一些可以被省略，如
<p>标签。同时也有一些标签不存在结束标签，例如<input>标签（代码清单 9.1）。说到底标签只是用于书写场合，在谈论 DOM 的话题时几乎不会使用。
代码清单 9.1 标签
<div> <!-- div的起始标签 -->
<p> <!-- p的结束标签可以省略 -->
<input type="button"> <!-- input只有起始标签而没有结束标签 -->
</div> <!-- div的结束标签 -->
元素、节点
比较容易产生混淆的是元素和节点的概念。元素和节点之间略有一些继承关系，其中节点是父类概念。节点具有 nodeType 这一属性，如果其值为 ELEMENT_NODE(1)，该节点则是一个元素。
表 9.5 总结了 HTML 文档常用的节点。
表 9.5 在 HTML 文档中使用的节点
| 节点 | 节点类型常量 | 节点类型的值 | 接口 |
|---|---|---|---|
| 元素节点 | ELEMENT_NODE | 1 | Element |
| 属性节点 | ATTRIBUTE_NODE | 2 | Attr |
| 文本节点 | TEXT_NODE | 3 | Text |
| 注释节点 | COMMENT_NODE | 8 | Comment |
| 文档节点 | DOCUMENT_NODE | 9 | Document |
9.2.2 DOM 操作
JavaScript 的作用是使网页能够执行某些功能。为了实现这些功能，必须对 DOM 进行操作。通过选择某个 DOM 元素并改写其属性，或创建一个新的 DOM 元素，就能够给予用户视觉反馈，以实现交互功能。之后，将从选择、创建、更改 与 删除 四个方面对 DOM 的相关操作进行说明。
9.2.3 Document 对象
Document 对象是 DOM 树结构中的根节点。虽然这是一个根节点，在 HTML 文档中却不用书写其对应的标签。例如，虽然
<html>标签与<body>标签分别对应 Document 对象中的 documentElement 属性与 body 属性，但却没有与Document 对象自身相对应的标签。这是因为 Document 对象是一种用于表示整个 HTML 文档的对象。
可以通过 JavaScript 中的 document 这一全局变量来访问 Document 对象。准确地说，document 是 window 对象中的一个属性。不过，由于 window 对象是一个全局对象，因此在对其属性进行访问时可以将 window. 省略不写。
实际上，在通过 JavaScript 表示 HTML 文档时，所有的全局变量都是 window 对象的属性。可以通过下面的代码对此进行确认。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<script>
var hzh = '黄子涵';
alert(window.hzh === '黄子涵');
</script>
</body>
</html>
顺便提一下，window 对象并没有包含于 DOM 树结构之中。如前面所讲，Document 对象在 DOM 树结构中是根节点，因此也无法通过下面将要介绍的方法来取得 Document 对象的父节点。
