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树的最上层，其下只有一个根节点<html>（rootnode）和一个文档类型节点<!doctype html>（DocumentType）
节点的类型
节点的类别可以通过 node.nodeType 属性得知其返回值对应如下的节点
元素节点（element）：1
属性节点（attr）：2
文本节点（text）：3
扫描二维码关注公众号，回复： 953165 查看本文章
注释节点（Comment）：8
文档节点（document）：9
文档类型节点（DocumentType）：10
文档片段节点（DocumentFragment）：11
12.02 - DOM相关
文档结构的加载顺序
解析HTML结构 ==> 加载外部的样式和脚本文件 ==> 解析并执行脚本代码 ==> 构键HTML DOM模型（触发DOMContentLoaded事件） ==> 加载图片等外部文件 ==> 界面加载完毕（触发load事件）
12.03 - Node的属性与方法
所有的节点都有一些属性和方法有的是共同有的是单独的，我们可以通过这些属性和方法进行对DOM的一系列操作
属性
nodeType：节点的类型，返回一个整数
nodeName：节点的名称
文档节点（document）：
#document元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：
#text文档片断节点（DocumentFragment）：
#document-fragment文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：
#comment
nodeValue：节点的文本值
只有文本节点（text）和注释节点（comment）有文本值
textContent：节点和它的所有后代节点的文本内容
与innerText一致，标签将不会被解析
baseURI：当前网页的绝对路径
console.log(document.baseURI);// file:///F:/home/js/t1.html
nextSibling / previousSibling：距离最近的前后同级节点
可以是元素节点，文本节点，注释节点等等
parentNode：返回元素的父节点
通过这种方式返回的父节点，肯能是
元素节点，文档节点，文档片段节点
parentElement：返回元素文档节点父节点
firstChild / lastChild：返回当前元素的第一个 / 最后一个子节点
包括所有的节点
childNodes：返回当前节点的所有子节点的集合，包含length属性
方法
appendChild(node)：将node作为其最后一个子节点插入
hasChildNodes()：判断一个元素是否有子节点，返回一个布尔值
任何类型的节点都参与判断
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：返回元素的（第一个 / 最后一个）
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 )
方法
createElement(nodeName)：创建一个元素节点，参数为标签名
var newDiv = document.createElement('div');
newDiv.innerHTML = 'hello DOM!';
document.body.append(newDiv);
createTextNode(text)：创建一个文本节点，参数为需要创建的文本的字符串
此方法与innerHTML添加的区别在于，不会影响到原有节点的属性或者方法的绑定，而innerHTML相当于重新添加了所有元素，将会失去事件的绑定
write() writeln()
cookie
浏览器在本地暂时存储数据的机制，通常为一些用户名，等等用户信息的存储
cookie相关
存储的数据会暂时被浏览器保存到本地
每个浏览器的cookie保存位置和方法不同 不能通用
存储的位置以域名为单位存储
chrome浏览器不能在本地的环境存储或使用必须在后台环境
默认情况下cookie只能保存到浏览器关闭，可以通过设置时间戳调整时间
cookie的读写
cookie实际上就是存储了一对一对的字符串的键与值，所以我们只需要给cookie赋值那么就可以存储cookie但是需要注意字符串有特定的格式：
存储格式：'key=value;'
读取格式：'name=amo; password=666666'
PS：每次只能存储一条数据，读取的时候为全部读取，多条数据之间用分号和空格隔开
// 设置
document.cookie = "name=amo;";
document.cookie = "password=666666;";
// 获取
console.log( document.cookie );// name=amo; password=666666
cookie生命周期
默认情况下cookie只能保存到浏览器关闭，如果我们需要cookie在一段时间内保存，我们在存储cookie的时候设置过期的时间戳
时间戳写在每条数据后的 expires 属性中代表当前数据的过期时间
时间戳需要转换为 UTC 的格式
// 设置固定时间戳
var dateUser = 'Sat, 07 Apr 2018 13:56:21 GMT';
document.cookie = "name=amo;expires=" + dateUser;
// 设置未来某个时间的时间戳
var datePassword = new Date( new Date().getTime() + 10000 ).toUTCString();// 设置未来10000毫秒后的时间戳
document.cookie = "password=666666;expires=" + date;
12.05 - 练习
自动悬浮导航
楼梯导航