这是我参与更文挑战的第4天，活动详情查看：更文挑战
上次 系统学习BOM 后，时隔几天，终于有时间继续系统学习 DOM，相对于 BOM，DOM 的内容明显更多，因此打算分开整理。
DOM（Document Object Model，文档对象模型）是针对 HTML 和 XML 文档的一个 API，通过层次化节点树的方式来描述文档，并且提供了一系列增删改查的方法，来对文档进行操作。
因为 DOM 是一棵树，所以首先需要了解它的节点类型，从而对其全貌有个大致印象。
1. Node
Node 是 DOM1 定义的接口，该接口将由 DOM 的所有节点类型实现，它有如下常用的属性和方法：
- nodeType：表示节点类型，共有12个取值，分别是：
- Node.ELEMENT_NODE(1)
- Node.ATTRIBUTE_NODE(2)
- Node.TEXT_NODE(3)
- Node.CDATA_SECTION_NODE(4)
- Node.ENTITY_REFERENCE_NODE(5)
- Node.ENTITY_NODE(6)
- Node.PROCESSING_INSTRUCTION_NODE(7)
- Node.COMMENT_NODE(8)
- Node.DOCUMENT_NODE(9)
- Node.DOCUMENT_TYPE_NODE(10)
- Node.DOCUMENT_FRAGMENT_NODE(11)
- Node.NOTATION_NODE(12)
- nodeName：节点名称
- nodeValue：节点值
- childNodes：保持子节点的 NodeList 对象，是一个类数组
- appendChild：向 childNodes 列表的添加一个节点
- 更多方法不再列出，可以查询 MDN 文档
2. Document
表示整个文档，nodeType = 9，一般使用它的实例 document，它有一些常用的属性和反方法：
- document.documentElement：html 节点
- document.title：title 节点，即显示在标题栏的文本
- document.body：body 节点
- document.URL：地址栏的 URL
- document.getElementById：通过 id 获取节点
- document.querySelector：通过选择器获取节点
- document.write：在文档中动态写入 html
- 更多方法不再列出
3. Element
表示组成文档节点元素，nodeType = 1，这个类型非常常用，比如常见的有：
- HTMLDivElement：div 元素
- HTMLImageElement：image 元素
- HTMLTableElement：table 元素
- 更多方法不再列出
4. Text
表示 text 节点，nodeType = 3，即在 DOM 树中没有标签包裹的文本。
5. Comment
表示注释，nodeType = 8。
6. CDATASection
只针对 XML 文档，nodeType = 4，表示 CDATA 区域。
7. DocumentType
包含于文档 doctype 有关信息，nodeType = 10，即 html 最顶上 <!DOCTYPE html>。
8. DocumentFragment
“虚拟”节点，nodeType = 11，在文档中没有对应标记，类似 React.Fragment。
9. Attr
表示元素属性，nodeType = 2，比如 width、height 等。
以上就是 DOM 节点的基本类型，对于每个类型，都包含对应的增删改查方法，这样通过 API，就可以完备的操作一棵 DOM 树，从而操作文档。
这样抽象有什么好处呢？试想如果没有 DOM，我们操作文档就只能通过字符串匹配来做，这样很低效且容易出错，而 DOM 正好给我们提供了一套完备高效的方法。
