原生js中常用的操作DOM的api接口
創建型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等數據，具體可查看鏈接
~只有掌握原生的js，才能真正做好js的開發~
參考鏈接：http://www.imooc.com/article/2562
來源：慕課網