基本概念

在講解操作DOM的api之前，首先我們來復習一下一些基本概念，這些概念是掌握api的關鍵，必須理解它們。

Node類型

DOM1級定義了一個Node接口，該接口由DOM中所有節(jié)點類型實現(xiàn)。這個Node接口在JS中是作為Node類型實現(xiàn)的。在IE9以下版本無法訪問到這個類型，JS中所有節(jié)點都繼承自Node類型，都共享著相同的基本屬性和方法。
Node有一個屬性nodeType表示Node的類型，它是一個整數(shù)，其數(shù)值分別表示相應的Node類型，常見的如下：

假設我們要判斷一個Node是不是元素，我們可以這樣判斷

if(someNode.nodeType == 1){
console.log("Node is a element");
}

這些Node類型中，我們最常用的就是element，text，attribute，comment，document，document_fragment這幾種類型。
需要注意的就是：HTML中的節(jié)點并不只是包括元素節(jié)點，它還包括文本節(jié)點，注釋節(jié)點等等

創(chuàng)建節(jié)點的常用api

• createElement
  createElement通過傳入指定的一個標簽名來創(chuàng)建一個元素，如果傳入的標簽名是一個未知的，則會創(chuàng)建一個自定義的標簽，注意：IE8以下瀏覽器不支持自定義標簽。
  使用如下：

var div = document.createElement("div");

使用createElement要注意：通過createElement創(chuàng)建的元素并不屬于html文檔，它只是創(chuàng)建出來，并未添加到html文檔中，要調用appendChild或insertBefore等方法將其添加到HTML文檔樹中。

頁面修改型常用API

• appendChild
  appendChild我們在前面已經提到，就是將指定的節(jié)點添加到調用該方法的節(jié)點的子元素的末尾。調用方法如下：

parent.appendChild(child);

child節(jié)點將會作為parent節(jié)點的最后一個子節(jié)點。
appendChild這個方法很簡單，但是還有有一點需要注意：如果被添加的節(jié)點是一個頁面中存在的節(jié)點，則執(zhí)行后這個節(jié)點將會添加到指定位置，其原本所在的位置將移除該節(jié)點，也就是說不會同時存在兩個該節(jié)點在頁面上，相當于把這個節(jié)點移動到另一個地方。
需要注意的是：如果child綁定了事件，被移動時，它依然綁定著該事件。

• removeChild
  removeChild顧名思義，就是刪除指定的子節(jié)點并返回，用法如下：

var deletedChild = parent.removeChild(node);

deletedChild指向被刪除節(jié)點的引用，它等于node，被刪除的節(jié)點仍然存在于內存中，可以對其進行下一步操作。
注意：如果被刪除的節(jié)點不是其子節(jié)點，則程序將會報錯。我們可以通過下面的方式來確?？梢詣h除：

if(node.parentNode){
    node.parentNode.removeChild(node);
}

通過節(jié)點自己獲取節(jié)點的父節(jié)點，然后將自身刪除。

• replaceChild
  replaceChild用于使用一個節(jié)點替換另一個節(jié)點，用法如下

parent.replaceChild(newChild,oldChild);

newChild是替換的節(jié)點，可以是新的節(jié)點，也可以是頁面上的節(jié)點，如果是頁面上的節(jié)點，則其將被轉移到新的位置，oldChild是被替換的節(jié)點。
頁面修改型api要注意幾個特點：
（1）不管是新增還是替換節(jié)點，如果新增或替換的節(jié)點是原本存在頁面上的，則其原來位置的節(jié)點將被移除，也就是說同一個節(jié)點不能存在于頁面的多個位置
（2）節(jié)點本身綁定的事件會不會消失，會一直保留著。

節(jié)點查詢型API

節(jié)點查詢型API也是非常常用的api，下面我們分別說明一下每一個api的使用。

• document.getElementById
  這個接口很簡單，根據元素id返回元素，返回值是Element類型，如果不存在該元素，則返回null。
  使用這個接口有幾點要注意：
  （1）元素的Id是大小寫敏感的，一定要寫對元素的id
  （2）HTML文檔中可能存在多個id相同的元素，則返回第一個元素

• document.getElementsByTagName
  這個接口根據元素標簽名獲取元素，返回一個即時的HTMLCollection類型

• document.getElementsByClassName
  這個API是根據元素的class返回一個即時的HTMLCollection，用法如下

var elements = document.getElementsByClassName(names);

這個接口有下面幾點要注意：
（1）返回結果是一個即時的HTMLCollection，會隨時根據文檔結構變化
（2）IE9以下瀏覽器不支持
（3）如果要獲取2個以上classname，可傳入多個classname，每個用空格相隔，例如

var elements = document.getElementsByClassName("test1 test2");

• document.querySelector和document.querySelectorAll

這兩個api很相似，通過css選擇器來查找元素，注意選擇器要符合CSS選擇器的規(guī)則。
（1）document.querySelector返回第一個匹配的元素，如果沒有匹配的元素，則返回null。
（2）document.querySelectorAll的不同之處在于它返回的是所有匹配的元素，而且可以匹配多個選擇符

兼容性問題：querySelector和querySelectorAll在ie8以下的瀏覽器不支持。

節(jié)點關系型api

在html文檔中的每個節(jié)點之間的關系都可以看成是家譜關系，包含父子關系，兄弟關系等等，下面我們依次來看看每一種關系。

• 父關系型api

1. parentNode：每個節(jié)點都有一個parentNode屬性，它表示元素的父節(jié)點。Element的父節(jié)點可能是Element，Document或DocumentFragment。
2. parentElement：返回元素的父元素節(jié)點，與parentNode的區(qū)別在于，其父節(jié)點必須是一個Element，如果不是，則返回null

• 兄弟關系型api

1. previousSibling：節(jié)點的前一個節(jié)點，如果該節(jié)點是第一個節(jié)點，則為null。注意有可能拿到的節(jié)點是文本節(jié)點或注釋節(jié)點，與預期的不符，要進行處理一下。

2. previousElementSibling：返回前一個元素節(jié)點，前一個節(jié)點必須是Element，注意IE9以下瀏覽器不支持。

3. nextSibling：節(jié)點的后一個節(jié)點，如果該節(jié)點是最后一個節(jié)點，則為null。注意有可能拿到的節(jié)點是文本節(jié)點，與預期的不符，要進行處理一下。

4. nextElementSibling：返回后一個元素節(jié)點，后一個節(jié)點必須是Element，注意IE9以下瀏覽器不支持。

• 子關系型api

1. childNodes：返回一個即時的NodeList，表示元素的子節(jié)點列表，子節(jié)點可能會包含文本節(jié)點，注釋節(jié)點等。
2. children：一個即時的HTMLCollection，子節(jié)點都是Element，IE9以下瀏覽器不支持。
3. firstNode：第一個子節(jié)點
4. lastNode：最后一個子節(jié)點
5. hasChildNodes方法：可以用來判斷是否包含子節(jié)點。

元素屬性型api

1. setAttribute
   根據名稱和值修改元素的特性，用法如下。

element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含該特性，則會創(chuàng)建該特性并賦值。
如果元素本身包含指定的特性名為屬性，則可以訪問屬性進行賦值，比如下面兩條代碼是等價的：

element.setAttribute("id","test");

element.id = "test";

2. getAttribute
   返回指定的特性名相應的特性值，如果不存在，則返回null或空字符串。用法如下：

var value = element.getAttribute("id");

總結

本文主要總結了原生js中常用的操作DOM的api接口，主要為了復習基礎知識。平時開發(fā)用多了jQuery等類庫，對基礎知識的了解可能就漸漸地遺忘，但這些基礎知識才是我們立足的根本，只有掌握原生的js，才能真正做好js的開發(fā)。

參考資料：
1.Javascript操作DOM常用API總結
2.MDN文檔