创建型API总结
创建型api主要包括createElement，createTextNode，cloneNode和createDocumentFragment四个方法，需要注意下面几点：
（1）它们创建的节点只是一个孤立的节点，要通过appendChild添加到文档中
（2）cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题
（3）使用createDocumentFragment来解决添加大量节点时的性能问题
页面修改型API
修改页面内容的api主要包括：appendChild，insertBefore，removeChild，replaceChild。
要注意几个特点：
（1）不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置
（2）节点本身绑定的事件会不会消失，会一直保留着。
节点查询型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[, pseudoElt]);element是要获取的元素，pseudoElt指定一个伪元素进行匹配。
返回的style是一个CSSStyleDeclaration对象。
通过style可以访问到元素计算后的样式
getBoundingClientRect
getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：
var clientRect = element.getBoundingClientRect();clientRect是一个DOMRect对象，包含left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。除了IE9以下浏览器，还包含元素的height和width等数据，具体可查看链接