DOM节点树与元素树
DOM：文档对象类型（Document Object Mohdel）是操作XML和HTML的一类对象的集合。DOM把整个页面映射为一个多层节点的树状结构。HTML或XML页面的每一个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。
通过DOM创建的表示文档的树形图，开发人员可以获得控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松的增加，删除，替换，或修改任何节点。
DOM的节点类型
- 元素节点：HTML元素在DOM中的形式
- 文本节点：HTML中未被元素包裹的文本（空格，回车也算）
- 注释节点：HTML中的注释虽然不参与执行，但在DOM中会呈现为注释节点
- 属性节点：HTML元素的属性在DOM中以属性节点的形式来表示。
节点的四个属性
- nodeName：该属性为节点的标签名 只读
- nodeValue：文本或注释节点的内容（文本节点注释节点专有） 可读写
- nodeType： 该属性为节点的类型，不同节点有不同的返回值
|节点类型|返回值 |
|-------------|----|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| document | 9 | - attributes：元素节点的属性集合（元素节点专有）可读，属性值可写，属性名不可写
遍历节点树
节点树的根节点为document
节点树查询操作
- parentNode -> 父节点
- childNodes -> 子节点们
- firstChild -> 第一个子节点
- lastChild -> 最后一个子节点
- nextSibling -> 后一个兄弟节点
- previousSibling -> 前一个兄弟节点
遍历元素树
元素树的根节点为
<html>元素
元素树查询操作
- parentElement-> 父元素节点
- children -> 子元素节点
- firstElementChild -> 第一个元素子节点
- lastElementChild -> 最后一个元素子节点
- nextElementSibling -> 后一个兄弟元素节点
- previousElementSibling -> 前一个兄弟元素节点