DOM的回流和重绘
重绘
当元素的样式改变不影响布局时，浏览器会将使用重绘对元素更新
回流
又叫重排（layout），当元素的结构或者触发某些属性时，浏览器会重新渲染页面被称为回流，回流一定会重绘
DOM 操作
1.通过id获取元素
document.getElementById(idName)
2.根据标签获取元素
document.getElementsByTagName(tagName) // 返回一个集合 （类数组对象） 从整个文档获取
element.getElementsByTagName(tagName) // 从element的后代元素中获取
3.根据类名获取元素（不兼容ie6-8）
document.getElementsByClassName(className) // 返回一个集合（类数组对象） 从整个文档获取
element.getElementsByClassName(className) // 从element的后代中获取
4.根据name属性值获取
document.getElementsByName() //返回集合 只有document才有该方法
5.根据选择器获取
不兼容ie6-8
document.querySelector(选择器) //选择器第一个满足选择器条件的
document.querySelectorAll(选择器) //选择所有满足选择器条件的，返回nodeList（类数组对象）
element.querySelector(选择器)
element.querySelectorAll(选择器)
6.document.head 获取head元素对象
7.document.body 获取body元素对象
8.document.documentElement 获取html元素对象
获取屏幕的宽度或者高度，兼容所有的浏览器
// 获取一屏幕的高度
var vH = document.documentElement.clientHeight || document.body.clientHeight;
// 偶去一屏幕的宽度
var vW = document.documentElement.clientWidth || document.body.clientWidth;
节点
- 文档节点
- 属性节点
- 元素节点
- 文本节点
- 注释节点
文档节点
- nodeType（节点类型）：9
- nodeName（节点名称）："#document"
- nodeValue (节点值)：null
属性节点
- nodeType ：2
- nodeName：属性名
- nodeValue：属性值 getAttributeNode（） 从当前元素钟通过名称获取属性节点
元素节点
- nodeType：1
- nodeName：大写的标签名
- nodeValue：null
文本节点
- nodeType：3
- nodeName："#text"
- nodeValue:文本内容
- 在标准浏览器中，换行和空格也属于文本节点
注释节点
- nodeType：8
- nodeName："#comment"
- nodeValue:注释的内容
节点之间的关系属性
节点类：
- parenNode 父节点
- childNodes 所有子节点
- firstChild 第一个子节点
- lastChild 最后一个子节点
- previousSibling 上一个兄弟节点
- nextSibling 下一个兄弟节点 元素类：
- children 所有元素的集合
- firstElementChild 第一个子元素 IE9+
- lastElementChild 最后一个子元素 IE9+
- previousElementSibling 上一个兄弟元素 IE9+
- nextElementSibling 下一个兄弟元素 IE9+
DOM 的增删改
1.createElement：创建一个元素
2.createTextNode：创建一个文本节点
3.appendChild：把元素追加到一个容器的末尾
4.insertBefore：把一个元素插入到另一个元素的前面
首先要指定一个父节点 var insertedNode = 父节点.insertBefore(要插入的节点, 插在这个节点之前)
var insertedNode = parentNode.insertBefore(newNode, referenceNode)
- newNode：将要插入的节点
- referenceNode：被参照的节点（即要插在该节点之前）
- insertedNode：插入后的节点
- parentNode：父节点
5.cloneNode：把某一个节点进行克隆
- ele.cloneNode（）浅克隆：只克隆一个节点
- ele。cloneNode（true）深克隆：克隆所有节点
6.removeChild：移除某个几点
<div id="id1">
1111
<p class="p1" id="p1">这是P1</p>
</div>
<script>
id1.removeChild(p1);
console.log(id1)
</script>
7.se/get/removarAttribute
设置/获取/删除 当前元素的某一个自定义属性
- setAttribute
- getAttribute
- removeAttribute
