12 - 文档对象模型（DOM）
DOM（Document Object Model），是浏览器提供给JavaScript操控HTML网页的接口，可以理解为是HTML文档的JavaScript形态
根据DOM会将HTML转换成一系列的节点，呈树状结构（DOM Tree），我们能够通过DOM提供的各种API来实现对HTML文档的，增，删，查，改等各种操作
12.01 - DOM 的结构
DOM 树结构图
节点（Node）
节点是DOM 中最基本的单位，像一颗树中的每根树枝。通过节点与节点之间的关系可以分为：
- 父节点 2. 子节点 3. 兄弟节点
而 document 对象中包含了所有的节点代表了整个DOM树的最上层，其下只有一个根节点（rootnode）和一个文档类型节点<!doctype html>（DocumentType）
-
节点的类型
节点的类别可以通过 node.nodeType 属性得知其返回值对应如下的节点
- 元素节点（element）：1
- 属性节点（attr）：2
- 文本节点（text）：3
- 注释节点（Comment）：8
- 文档节点（document）：9
- 文档类型节点（DocumentType）：10
12.02 - DOM相关
文档结构的加载顺序
解析HTML结构 ==> 加载外部的样式和脚本文件 ==> 解析并执行脚本代码 ==> 构键HTML DOM模型（触发DOMContentLoaded事件） ==> 加载图片等外部文件 ==> 界面加载完毕（触发load事件）
12.03 - Node的属性与方法
所有的节点都有一些属性和方法有的是共同有的是单独的，我们可以通过这些属性和方法进行对DOM的一系列操作
属性
- nodeType：节点的类型，返回一个整数
- nodeName：节点的名称
- 文档节点（document）：
#document - 元素节点（element）：大写的标签名
- 属性节点（attr）：属性的名称
- 文本节点（text）：
#text - 文档类型节点（DocumentType）：文档的类型
- 注释节点（Comment）：
#comment
- 文档节点（document）：
- parentNode：返回元素的父节点
通过这种方式返回的父节点，肯能是
元素节点，文档节点
- parentElement：返回元素文档节点父节点
方法
- appendChild(node)：将node作为其最后一个子节点插入
- cloneNode([boolean])：克隆节点
布尔值参数代表是否需要同时克隆子节点
但是会失去所有绑定的事件
- insertBefore(newNode, referenceNode)：在referenceNode节点前插入newNode
referenceNode必须是父节点中的子节点
referenceNode如果为null则插入的元素的最后 但是不能省略元素
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p id="addElement">new</p>
<script>
box.insertBefore(addElement,box.firstChild);// 添加到最前面
</script>- removeChild(childNode)：移除子节点，并且返回被移除的节点
此方法需要在父级节点上调用然后找到自己再进行删除
<div id="box">
<p>1</p>
<p>2</p>
<p id="rmChild">3</p>
<p>4</p>
</div>
<script>
rmChild.parentNode.removeChild(rmChild);// 移除第三个p标签
</script>- replaceChild(newNode, oldChild)：将oldChild替换为newNode，返回oldChild
oldChild 必须是元素的子节点
<div id="box">
<p>1</p>
<p>2</p>
<p id="rmChild">3</p>
<p>4</p>
</div>
<p id="addElement">new</p>
<script>
box.replaceChild(addElement,rmChild);// 将box 里面的第三个p标签替换为 addElement
</script>- contains(node)：检测node是否为元素的后代节点，返回一个布尔值
12.04 - 元素节点的属性与方法
属性
- children：获取元素的所有元素子节点，类似与css的 > 选择器
- firstElementChild / lastElementChild：返回元素的（第一个 / 最后一个）
- nextElementSibling / previousElementSibling：距离最近的前后同级元素节点
- childElementCount：返回拥有的子节点数
- tagName：元素的标签名
- innerHTML：元素包含的HTML内容
- outerHTML：元素自身以及包含的HTML内容
- offsetParent：获取元素的定位父级节点
方法
- append(node[, node ...]) / prepend(node[, node ...])：往前 / 后，添加一个或者多个
子节点 - before(node[, node ...]) / after(node[, node ...])：往前 / 后，添加一个或者多个
兄弟节点 - remove()：从dom中删除自己
- replaceWith(child)：替换当前节点
宽高位置相关属性
- clientWidth / clientHeight：元素自身的
可视宽度 / 高度 （content+padding）
宽度不包括滚动条的宽度，不计算超出内容的宽度
- offsetWidth / offsetHeight：元素自身的
总宽度 / 高度 （content+padding+border）
宽度包括滚动条的宽度，不计算超出内容的宽度，同时需要获取整个网页的高度，需要从 document.documentElement （HTML对象）上获取
- scrollWidth / scrollHeight：元素以及超出内容的
总宽度 / 高度（content+padding）
宽度包括滚动条的宽度，计算超出内容的宽度
- scrollTop / scrollLeft：元素垂直 / 水平 滚动条滚动的距离
一般结合 scroll 事件使用，同时需要获取整个网页的滚动高度，需要从 document.documentElement （HTML对象）上获取
- offsetLeft / offsetTop：获取元素相对与定位父级的水平 / 垂直 距离
// 获取元素相对整个网页的位置
function getElePosition(ele){
var x,y,p;
do{
x = ele.offsetLeft,y = ele.offsetTop;
p = ele.offsetParent;
}while(p !== null);
return {x:x,y:y};
}- Element.getBoundingClientRect()：方法返回元素的大小及其相对于视口的位置。
12.05 - document对象
document 对象为整个文档的最上层的对象，DOM中所有的节点都是document对象的子节点，并且包含了许多与DOM相关的方法与属性
属性
- doctype：返回文档的文档申明
- documentElement：返回根元素( HTML )
- baseURI：当前网页的绝对路径
方法
- createElement(nodeName)：创建一个元素节点，参数为标签名
var newDiv = document.createElement('div');
newDiv.innerHTML = 'hello DOM!';
document.body.append(newDiv);- createTextNode(text)：创建一个文本节点，参数为需要创建的文本的字符串
此方法与innerHTML添加的区别在于，不会影响到原有节点的属性或者方法的绑定，而innerHTML相当于重新添加了所有元素，将会失去事件的绑定
- write()