前言：在JavaScript中，DOM操作是最基礎的，本文就先讓我們初步的認識一下DOM的基本概念以及一些常用的API。（本文暫不繫統介紹DOM，僅作初步瞭解）
1、DOM 到底是個什麼鬼
文檔對象模型 (Document Object Model ，即DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，並定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析爲一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或程序語言連接起來。
文檔對象模型將 web 頁面與到腳本或編程語言連接起來。通常是指 JavaScript，但將 HTML、SVG 或 XML 文檔建模爲對象並不是 JavaScript 語言的一部分。DOM模型用一個邏輯樹來表示一個文檔，樹的每個分支的終點都是一個節點(node)，每個節點都包含着對象(objects)。DOM的方法(methods)讓你可以用特定方式操作這個樹，用這些方法你可以改變文檔的結構、樣式或者內容。節點可以關聯上事件處理器，一旦某一事件被觸發了，那些事件處理器就會被執行。
2、節點
DOM 的最小組成單位叫做節點（node）。文檔的樹形結構（DOM 樹），就是由各種不同類型的節點組成。每個節點可以看作是文檔樹的一片葉子。
節點的類型有以下七種，瀏覽器提供一個原生的節點對象Node，而這七種節點都繼承了Node，因此具有一些共同的屬性和方法：
- Document：整個文檔樹的頂層節點
- DocumentType：doctype標籤（比如）
- Element：網頁的各種HTML標籤（比如、等）
- Attribute：網頁元素的屬性（比如class=”right”）
- Text：標籤之間或標籤包含的文本
- Comment：註釋
- DocumentFragment：文檔的片段
3、節點樹
一個文檔的所有節點，按照所在的層級，可以抽象成一種樹狀結構。這種樹狀結構就是 DOM 樹。它有一個頂層節點，下一層都是頂層節點的子節點，然後子節點又有自己的子節點，就這樣層層衍生出一個金字塔結構，倒過來就像一棵樹。
瀏覽器原生提供document節點，代表整個文檔。
文檔的第一層只有一個節點，就是 HTML 網頁的第一個標籤，它構成了樹結構的根節點（root node），其他 HTML 標籤節點都是它的下級節點。
除了根節點，其他節點都有三種層級關係。
- 父節點關係（parentNode）：直接的那個上級節點
- 子節點關係（childNodes）：直接的下級節點
- 同級節點關係（sibling）：擁有同一個父節點的節點
DOM 提供操作接口，用來獲取這三種關係的節點。比如，子節點接口包括firstChild（第一個子節點）和lastChild（最後一個子節點）等屬性，同級節點接口包括nextSibling（緊鄰在後的那個同級節點）和previousSibling（緊鄰在前的那個同級節點）屬性。
4、節點類型 Node.nodeType
nodeType屬性返回一個整數值，表示節點的類型。
document.nodeType // 9
上面代碼中，文檔節點的類型值爲9。
Node 對象定義了幾個常量，對應這些類型值。如：
document.nodeType === Node.DOCUMENT_NODE // true
上面代碼中，文檔節點的nodeType屬性等於常量Node.DOCUMENT_NODE。
不同節點的nodeType屬性值和對應的常量如下。
文檔節點（document）：9，對應常量
Node.DOCUMENT_NODE
元素節點（element）：1，對應常量Node.ELEMENT_NODE
屬性節點（attr）：2，對應常量Node.ATTRIBUTE_NODE
文本節點（text）：3，對應常量Node.TEXT_NODE
文檔片斷節點（DocumentFragment）：11，對應常量Node.DOCUMENT_FRAGMENT_NODE
文檔類型節點（DocumentType）：10，對應常量Node.DOCUMENT_TYPE_NODE
註釋節點（Comment）：8，對應常量Node.COMMENT_NODE
確定節點類型時，使用nodeType屬性是常用方法。如：
var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) { // 或者直接寫成 node.nodeType === 1
console.log('該節點是元素節點');
}5、常用的DOM操作
createElement
createElement通過傳入指定的一個標籤名來創建一個元素，如果傳入的標籤名是一個未知的，則會創建一個自定義的標籤，注意：IE8以下瀏覽器不支持自定義標籤。
如：var div = document.createElement("div");appendChild
appendChild 即將指定的節點添加到調用該方法的節點的子元素的末尾。調用方法如下：parent.appendChild(child);
child節點將會作爲parent節點的最後一個子節點。document.getElementById
這個接口很簡單，根據元素id返回元素，返回值是Element類型，如果不存在該元素，則返回null。
使用這個接口有幾點要注意：
（1）元素的Id是大小寫敏感的，一定要寫對元素的id
（2）HTML文檔中可能存在多個id相同的元素，則返回第一個元素(當然多個同名id是不符合規範的)
（3）只從文檔中進行搜索元素，如果創建了一個元素並指定id，但並沒有添加到文檔中，則這個元素是不會被查找到的document.getElementsByTagName
這個接口根據元素標籤名獲取元素，返回一個即時的HTMLCollection類型document.getElementsByClassName
這個API是根據元素的class返回一個即時的HTMLCollection，document.querySelector和document.querySelectorAll
這兩個api很相似，通過css選擇器來查找元素，注意選擇器要符合CSS選擇器的規則。childNodes：返回一個即時的NodeList，表示元素的子節點列表，子節點可能會包含文本節點，註釋節點等。
children：一個即時的HTMLCollection，子節點都是Element，IE9以下瀏覽器不支持。getAttribute
getAttribute返回指定的特性名相應的特性值，如果不存在，則返回null或空字符串。用法如下：
var value = element.getAttribute("id");getBoundingClientRect
getBoundingClientRect用來返回元素的大小以及相對於瀏覽器可視窗口的位置，用法如下：var clientRect = element.getBoundingClientRect();
clientRect是一個DOMRect對象，包含left，top，right，bottom，它是相對於可視窗口的距離，滾動位置發生改變時，它們的值是會發生變化的。除了IE9以下瀏覽器，還包含元素的height和width等數據，具體可查看MDN鏈接 。