DOM(Document Object Model-文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API(应用程序接口)。DOM以节点树的形式来表现文档，每个节点代表文档的构成部分。
DOM操作：获取、处理。
document对象
常用属性
document.doctype
document.title
document.characterSet
document.head
document.body
document.images
document.readyState返回当前文档状态
- lodaing：加载阶段
- interactive: 加载外部资源
- complete：全部加载完成
document.compatMode返回浏览器处理文档的模式
- BackCompat：向后兼容模式
- CSS1Compat：严格模式
document.location === location //true
document.location === wimdow.location // true
document.location.href
document.location.host
document.location.assign('http://www.google.com')//跳转到另一个网页
document.location.reload(true)//实现页面刷新，优先从本地缓存重新加载
document.location.reload(false)
documen.location = 'http://www.google.com'//修改地址
方法
document.open()
document.open用于新建一个文档供write方法写入内容（清除当前文档重新写入内容）。
document.close()
document.close用于关闭open方法新建的文档，令write方法无法写入内容。
document.write()
用于向当前文档写入内容只要当前问当未用close方法关闭，所写内容就会追加再已有内容之后。（尽量不要用这个方法）
- 如果页面已经渲染完成再调用write方法，会先调用open方法，擦除当前文档所有内容再写入。
- 若在页面渲染过程中调用write方法，就不会调用open方法
查询元素
document.getElementById()
返回匹配指定ID属性的元素节点，如果没有发现元素匹配节点，则返回null。
document.getElementsByClassName()
返回一个类似数组的对象(不是数组)，包括所有class名符合指定条件的元素。元素的变化实时反映在返回结果中。
document.getElementsByClassName('one');
document.getElementsByClassName('one')[0];
document.getElementsByClassName('one first');
document.getElementsByClassName('one')[0].getElementsByClassName('two');
document.getElementsByName()
用于选择有name属性的HTML元素，返回一个NodeList格式的对象，不会实时反映元素的变化。
name和id属性不要设相同的值。
document.getElementsByTagName()
返回指定标签的元素。返回值是一个HTMLCollection对象，搜索结果是一个动态集合。
document.querySelector()
返回CSS选择器的元素结点。若多个节点满足条件，则返回第一个节点。若没有匹配的节点则返回null。
无法选择CSS伪元素。
document.querySelectorAll()
返回指定的CSS选择器的所有节点，返回的是NodeList类型对象。
创建元素
document.createElement()
生成HTML元素节点，参数是标签名即TagName属性。
document.createTextNode()
用来生成文本节点，参数为所要生成的文本节点的内容。
document.createDocumentFragment()
它的用途主要是在使用appendChild(), insertBefore(), replaceChild()时候，它作为一个
临时容器。
- 是把DocumentFragment的
所有子节点一次性地插入，而不是DocumentFragment本身，插入后会自动清空。 - DocumentFragment不属于DOM结构的一部分，对它进行操作不会影响到DOM，不会引起页面回流。
- 当我们把现有的DOM上的一个节点插入给DocumentFragment，这个节点会从原DOM上被删掉。
var box = document.querySelector('.box');
var fragment = document.createDocumentFragment();
for(var i = 0; i < 5;i++){
var child = document.createElement('li');
var text = document.createTextNode('hello'+i);
child.appendChild(text);
fragment.appendChild(child);
}
box.appendChild(fragment);
Node
属性
Node.firstChild
返回该节点的第一个子节点
Node.textContent
表示一个节点及其后代的文本内容，包括
<style><script>的内容
Node.textContent与element.innerHTML和HTMLElement.innerText的比较
- innerText只展示给人看的元素
- innerText受CSS影响会引起回流
- innerText不返回隐藏元素的文本
- innerHTML会解析成HTML形式
- textContent可以防止XSS攻击
方法
Node.appendChild()
在元素末尾添加元素
Node.insertBefore()
在某个元素之前插入元素，接受两个参数：插入的元素和插在那个元素位置之前
Node.replaceChild()
接受两个参数：要插入的元素和要替换的元素。
Node.removeChild()
移出当前节点的一个节点
Node.cloneNode()
有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素。false的时候只会复制元素本身。
Element对象
Element对象表示HTML元素。拥有类型为元素节点，文本节点，注释节点的子节点。
属性
element.children
返回元素的子元素集合，是一个HTMLCollection
element.className
一个DOMString，表示这个元素的class
element.classList
返回该元素的class属性
样式的改变尽量使用class的新增删除来实现
var nodeBox = document.querySelector('.box');
console.log(nodeBox.classList);
nodeBox.classList.add('active');//
nodeBox.classList.remove('active');//
nodeBox.classList.toggle('active');//增删切换
nodeBox.classList.contains('active');//判断是否有
nodeBox.classList.replace('active','xxx');//取代
element.id
DOMstring表示这个元素的id
页面宽高
(以下图片均来自mdn,只用作方便自己理解)
element.clientHeight
height + padding - 滚动条的高度
element.scrollHeight
padding + 包括元素整体内（包括看不见的部分，即整个文本不在当前页面显示滚动可见的部分）
element.scrollTop/Left
元素内容的顶部（卷起来的）到它视口可见内容顶部的距离。
若元素不能被滚动则为0。
判断元素是否滚动到底
适用于判断用户是否阅读完告知详情
element.scrollHeight - element.scrollTop === element.clientHeight
element.innerHTML
仅获取内容的HTML形式和替换内容，容易产生安全问题
element.outerHTML
获取描述元素及其后代的序列化HTML片段，还可以从指定节点替换元素
方法
element.getAttribute()
获取元素上指定的一个属性的参数值，不存在则返回null或空字符串（""）
element.setAttribute()
设置指定元素上的某个元素值
element.removeAttribute()
element.getBoundingClientRect()
用于确定元素相对于视口的位置，不四舍五入精确到小数
HTMLElement
HTMLElement.offsetHeight
是一个只读属性，包括内边距、边框、滚动条
HTMLCollection
HTMLCollection
HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以选择元素的方法和属性
NodeList
NodeList 对象节点的集合。
通常由node.childNodes和document.querySelectorAll返回
遍历NodeList对象使用for..of循环（不使用for..in和for each ..in）
比较
- 相同点： 都是类数组对象（不是数组），节点的变化都会实时反映在集合中
- 不同点： 少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有
