操作dom常用api
-
创建型API总结
- createElement，createTextNode，cloneNode，createDocumentFragment
-
创建的节点只是一个孤立的节点，要通过appendChild添加到文档中
-
cloneNode 要注意如果被复制的节点是否包含子节点以及事件绑定等问题
-
使用createDocumentFragment来解决添加大量节点时的性能问题
-
- createElement，createTextNode，cloneNode，createDocumentFragment
-
页面修改型API
-
appendChild，insertBefore，removeChild，replaceChild
-
新增还是替换节点，则其原来位置的节点将被移除
- 同一个节点不能存在于页面的多个位置
-
节点本身绑定的事件会不会消失，会一直保留着
-
-
-
节点查询型API
-
document.getElementById
-
document.getElementsByTagName
-
document.getElementsByName
-
document.getElementsByClassName
-
document.querySelector
-
document.querySelectorAll
- 通过css选择器来查找元素，注意选择器要符合CSS选择器的规则，使用的深度优先搜索来获取元素
-
-
节点关系型api
-
1.父关系型api
-
parentNode：Element的父节点可能是Element，Document或DocumentFragment
-
parentElement：与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null
-
-
2.兄弟关系型api
-
previousSibling：节点的前一个节点，如果该节点是第一个节点，则为null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下
-
previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持
-
nextSibling：节点的后一个节点，如果该节点是最后一个节点，则为null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下
-
nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持
-
-
3.子关系型api
-
childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
-
children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。
-
firstNode：第一个子节点
-
lastNode：最后一个子节点
-
hasChildNodes方法：可以用来判断是否包含子节点。
-
-
-
元素属性型api
- setAttribute：根据名称和值修改元素的特性eg:element.setAttribute(name, value)
- getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串
-
元素样式型api
-
window.getComputedStyle是用来获取应用到元素后的样式，假设某个元素并未设置高度而是通过其内容将其高度撑开，这时候要获取它的高度就要用到getComputedStyle，用法如下：
-
var style = window.getComputedStyle(element[, pseud oElt])
-
element是要获取的元素，pseudoElt指定一个伪元素进行匹配
-
返回的style是一个CSSStyleDeclaration对象
-
通过style可以访问到元素计算后的样式
-
getBoundingClientRect
-
getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：
- var clientRect = element.getBoundingClientRect();
-
clientRect是一个DOMRect对象，包含left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。除了IE9以下浏览器，还包含元素的height和width等数据
-
