本文主要是對常用的API進行一次通讀了解，方便在以后的學(xué)習(xí)過程中能夠有所印象

類型

這些Node類型中，我們最常用的就是element，text，attribute，comment，document，document_fragment這幾種類型。

• <b>Element類型</b>：對元素標(biāo)簽名，子節(jié)點和特性的訪問，我們常用HTML元素比如div，span，a等標(biāo)簽就是element中的一種。
• <b>Text類型</b>：表示文本節(jié)點，它包含的是純文本內(nèi)容，不能包含html代碼，但可以包含轉(zhuǎn)義后的html代碼。
• <b>Attr類型</b>：表示元素的特性，相當(dāng)于元素的attributes屬性中的節(jié)點。
• <b>Comment類型</b>：表示HTML文檔中的注釋。
• <b>Document類型</b>：Document表示文檔。 在瀏覽器中，document對象是HTMLDocument的一個實例，表示整個頁面，它同時也是window對象的一個屬性。
• <b>DocumentFragment類型</b>：是所有節(jié)點中唯一一個沒有對應(yīng)標(biāo)記的類型，它表示一種輕量級的文檔，可能當(dāng)作一個臨時的倉庫用來保存可能會添加到文檔中的節(jié)點。

節(jié)點創(chuàng)建型API

將API細(xì)分后，首先介紹的是創(chuàng)建型API，用途是創(chuàng)建節(jié)點。
不過要注意的是，創(chuàng)建的元素并不屬于html文檔，它只是創(chuàng)建出來，并未添加到html文檔中

1. createElement
   通過傳入指定的一個標(biāo)簽名來創(chuàng)建一個元素，如果傳入的標(biāo)簽名是一個未知的，則會創(chuàng)建一個自定義的標(biāo)簽。

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

2. createTextNode
   創(chuàng)建一個文本節(jié)點

var textNode = document.createTextNode("一個TextNode");

3. cloneNode
   用來返回調(diào)用方法的節(jié)點的一個副本，它接收一個bool參數(shù)，用來表示是否復(fù)制子元素.

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 傳入true
parent2.id = "parent2";

這段代碼通過cloneNode復(fù)制了一份parent元素，其中cloneNode的參數(shù)為true，表示parent的子節(jié)點也被復(fù)制，如果傳入false，則表示只復(fù)制了parent節(jié)點。

4. createDocumentFragment
   創(chuàng)建一個DocumentFragment，存儲臨時的節(jié)點用來準(zhǔn)備添加到文檔中。

創(chuàng)建型API總結(jié)

創(chuàng)建型api主要包括createElement，createTextNode，cloneNode和createDocumentFragment四個方法，需要注意下面幾點：
（1）它們創(chuàng)建的節(jié)點只是一個孤立的節(jié)點，要通過appendChild添加到文檔中
（2）cloneNode要注意如果被復(fù)制的節(jié)點是否包含子節(jié)點以及事件綁定等問題
（3）使用createDocumentFragment來解決添加大量節(jié)點時的性能問題

頁面修改型API

如果修改的節(jié)點是頁面上的節(jié)點，則會移動該節(jié)點到指定位置，并且保留其綁定的事件。

1. appendChild
   將指定的節(jié)點添加到調(diào)用該方法的節(jié)點的子元素的末尾。

parent.appendChild(child);

2. insertBefore
   添加一個節(jié)點到一個參照節(jié)點之前

parentNode.insertBefore(newNode,refNode);

3. removeChild
   刪除指定的子節(jié)點并返回
   不過它等于node，被刪除的節(jié)點仍然存在于內(nèi)存中

var deletedChild = parent.removeChild(node);

4. replaceChild

1
parent.replaceNode(newChild,oldChild);

節(jié)點查詢型API

1. document.getElementById
   根據(jù)元素id返回元素，返回值是Element類型，如果不存在該元素，則返回null。

2. document.getElementsByTagName
   根據(jù)元素標(biāo)簽名獲取元素，返回一個即時的HTMLCollection類型

3. document.getElementsByName
   通過指定的name屬性來獲取元素，它返回一個即時的NodeList對象。

4. document.getElementsByClassName
   根據(jù)元素的class返回一個即時的HTMLCollection

var elements = document.getElementsByClassName(names);

可以傳入多個classname，中間需要加上空格

5. document.querySelector和document.querySelectorAll
   都是通過css選擇器來查找元素，不過有細(xì)微的差別。

• document.querySelector。
  返回第一個匹配的元素，如果沒有匹配的元素，則返回null。
• document.querySelectorAll
  返回的是所有匹配的元素，而且可以匹配多個選擇符

節(jié)點關(guān)系型api

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

1. 父關(guān)系型api

• <b>parentNode</b>：每個節(jié)點都有一個parentNode屬性，它表示元素的父節(jié)點。Element的父節(jié)點可能是Element，Document或DocumentFragment。

• <b>parentElement</b>：返回元素的父元素節(jié)點，與parentNode的區(qū)別在于，其父節(jié)點必須是一個Element，如果不是，則返回null.

2. 兄弟關(guān)系型api

• <b>previousSibling</b>：節(jié)點的前一個節(jié)點，如果該節(jié)點是第一個節(jié)點，則為null。
• <b>previousElementSibling</b>：返回前一個元素節(jié)點，前一個節(jié)點必須是Element.
• <b>nextSibling</b>：節(jié)點的后一個節(jié)點，如果該節(jié)點是最后一個節(jié)點，則為null。
• <b>nextElementSibling</b>：返回后一個元素節(jié)點，后一個節(jié)點必須是Element.

3. 子關(guān)系型api

• <b>childNodes</b>：返回一個即時的NodeList，表示元素的子節(jié)點列表.
• <b>children</b>：一個即時的HTMLCollection，子節(jié)點都是Element
• <b>firstNode</b>：第一個子節(jié)點
• <b>lastNode</b>：最后一個子節(jié)點
  hasChildNodes方法：可以用來判斷是否包含子節(jié)點。

元素樣式型api

1. window.getComputedStyle
   用來獲取應(yīng)用到元素后的樣式，假設(shè)某個元素并未設(shè)置高度而是通過其內(nèi)容將其高度撐開，這時候要獲取它的高度就要用到getComputedStyle

var style = window.getComputedStyle(element[, pseudoElt]);

2. getBoundingClientRect
   用來返回元素的大小以及相對于瀏覽器可視窗口的位置

var clientRect = element.getBoundingClientRect();