Dom全称叫Document Object Model（文档对象模型），Dom分为几种类型，HTML为其中一种。
当网页被加载时，浏览器会创建页面的HTML DOM，HTML DOM会结构化为对象树：
对象树里面每一个对象都是一个节点：
- 整个文档是文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 所有注释是注释节点
注意：属性节点不是元素节点的子节点，文本节点是属性节点的子节点，元素节点通过attributes获取属性节点
节点之间的关系：
存在以上关系，故以下节点属性可以在节点之间导航：
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
访问元素节点
HTML DOM 能够通过 JavaScript 进行访问，想访问元素节点需要通过先访问document对象的方法。
查找 HTML 元素
| 方法 | 描述 | 注意 |
|---|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素（返回元素） | |
| document.getElementsByTagName(name) | 通过标签名来查找元素（返回元素列表） | 返回HTMLCollection 对象，HTMLCollection 对象是类数组的 HTML 元素列表（集合），能够遍历列表并通过数字引用元素（就像数组那样），但是无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join() |
| document.getElementsByClassName(name) | 通过类名来查找元素（返回元素列表） | 返回HTMLCollection 对象，HTMLCollection 对象是类数组的 HTML 元素列表（集合），能够遍历列表并通过数字引用元素（就像数组那样），但是无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join() |
| document.querySelectorAll("p.intro") | 通过 CSS 选择器查找 HTML 元素（返回 class="intro" 的所有 元素列表） | 返回HTMLCollection 对象，HTMLCollection 对象是类数组的 HTML 元素列表（集合），能够遍历列表并通过数字引用元素（就像数组那样），但是无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join() |
改变 HTML 元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素（在元素的子元素最后追加新元素） |
| element.insertBefore(newElement, childElement) | 添加 HTML 元素（在元素的一个子元素之前追加新元素） |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
