本系列随笔是本人的学习笔记，初学阶段难免会有理解不当之处，错误之处恳请指正。转载请注明出处：https://www.cnblogs.com/itwhite/p/12248730.html。
文档对象模型（Document Object Model）简称 DOM ，它提供了一套用于表示和操作 HTML 和 XML 文档内容的接口（API）。
DOM 描绘了一个层次化的节点树，允许开发人员通过添加节点、删除节点或修改该节点来更新文档页面内容。
比如下面一个 HTML 文档：
<html> <head> <title>Sample Document</title> </head> <body> <h1>An HTML Document</h1> <p>This is a <i>simple</i> document. </body> </html>
将生成如下图所示的 DOM 节点树：
上图中每一个方框表示一个节点，其中包含三类节点：Document（根节点）、Element（使用尖括号括起来的节点） 和 Text（使用双引号括起来的节点）。
如下图所示：
由于 DOM 不仅是针对 HTML 而设计的，还可以应用于 XML，所以 Document 和 Element 还派生出了以 HTML 为命名前缀的子类型。上图中仅列出了 HTML 相关类型，并且如无特殊说明本系列笔记描述的 Document 和 Element 都是针对 HTML 的。
另外，鉴于 HTML 中各个标签元素的差异，HTMLElement 类型还派生出了很多代表 HTML 元素的具体类型。对应到前面的示例中的 DOM 节点树，如下图所示：
document 对象是 HTMLDocument 类型的一个实例，表示整个 HTML 文档。同时，它也是 window 对象的一个属性，因此我们可以把它当做一个全局变量来使用。
document 中常用属性列表：
| 属性 | 类型 | 描述 |
|---|---|---|
| documentElement | HTMLHtmlElement | 存放 <html> 元素节点对象 |
| head | HTMLHeadElement | 存放 <head> 元素节点对象 |
| body | HTMLBodyElement | 存放 <body> 元素节点对象 |
| title | String | 存放 <title> 元素节点文本 |
| URL | String | 存放 文档页面 URL |
| forms | HTMLCollection | 存放所有 <form> 元素节点对象的集合 |
| images | HTMLCollection | 存放所有 <img> 元素节点对象的集合 |
完。
JavaScript快速入门笔记（10）：文档对象模型（DOM）及 document 对象
原文：https://www.cnblogs.com/itwhite/p/12248730.html