在介紹DOM的API之前，先介紹下一些DOM基本概念。
DOM，文檔對象模型，把文檔樹當成對象來看的模型。
DOM 是 JavaScript 操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個 JavaScript 對象，從而可以用腳本進行各種操作（比如增刪內容）。
節點（Node）
節點是有DOM樹所形成的樹形結構所產生的連接點。DOM樹是由節點構成的集合。
節點（Node）的類型有七種:
- Document : 整個文檔樹的頂層節點
- DocumentType : doctype標簽（比如<!DOCTYPE html>）
- Element : 網頁的各種HTML標簽
- Attribute : 網頁元素的屬性
- Text : 標簽之間或標簽包含的文本
- Comment : 注釋
- DocumentFragment : 文檔的片段
節點（Node）接口的屬性
所有 DOM 節點都繼承了 Node 接口，擁有一些共同的屬性和方法。這是 DOM 操作的基礎。
Node.nodeType 屬性返回一個整數值，表示節點的類型
不同節點的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_NODENode.nodeName屬性返回節點的名稱。
不同節點的nodeName屬性值如下:
文檔節點（document）：#document
元素節點（element）：大寫的標簽名
屬性節點（attr）：屬性的名稱
文本節點（text）：#text
文檔片斷節點（DocumentFragment）：#document-fragment
文檔類型節點（DocumentType）：文檔的類型
注釋節點（Comment）：#commentnodeValue屬性返回一個字符串，表示當前節點本身的文本值，該屬性可讀寫。
只有文本節點（text）和注釋節點（comment）有文本值，因此這兩類節點的nodeValue可以返回結果，其他類型的節點一律返回null。
Node.textContent返回當前節點和它的所有后代節點的文本內容。textContent屬性自動忽略當前節點內部的 HTML 標簽，返回所有文本內容。
baseURI屬性返回一個字符串，表示當前網頁的絕對路徑。瀏覽器根據這個屬性，計算網頁上的相對路徑的 URL。該屬性為只讀。
Node.ownerDocument屬性返回當前節點所在的頂層文檔對象，即document對象。
document對象本身的ownerDocument屬性，返回null。
Node.nextSibling 屬性返回緊跟在當前節點后面的****第一個同級節點。如果當前節點后面沒有同級節點，則返回null。
Node.previousSibling屬性返回當前節點前面的、距離最近的一個同級節點。如果當前節點前面沒有同級節點，則返回null。
Node.parentNode屬性返回當前節點的父節點。對于一個節點來說，它的父節點只可能是三種類型：元素節點（element）、文檔節點（document）和文檔片段節點（documentfragment）。
Node.parentElement屬性返回當前節點的父元素節點。如果當前節點沒有父節點，或者父節點類型不是元素節點，則返回null。
由于父節點只可能是三種類型：元素節點、文檔節點（document）和文檔片段節點（documentfragment）。parentElement屬性相當于把后兩種父節點都排除了。
Node.firstChild屬性返回當前節點的第一個子節點，如果當前節點沒有子節點，則返回null。
注意，firstChild返回的除了元素節點，還可能是文本節點或注釋節點。
Node.lastChild屬性返回當前節點的最后一個子節點，如果當前節點沒有子節點，則返回null。用法與firstChild屬性相同。
NodechildNodes屬性返回一個類似數組的對象（NodeList集合），成員包括當前節點的所有子節點。
文檔節點（document）就有兩個子節點：文檔類型節點（docType）和 HTML 根元素節點。
Node.isConnected屬性返回一個布爾值，表示當前節點是否在文檔之中。
...
節點（Node）接口的方法
appendChild()方法接受一個節點對象作為參數，將其作為最后一個子節點，插入當前節點。該方法的返回值就是插入文檔的子節點。
hasChildNodes()方法返回一個布爾值，表示當前節點是否有子節點。
-
判斷一個節點有沒有子節點，有許多種方法，下面是其中的三種:
- node.hasChildNodes()
- node.firstChild !== null
- node.childNodes && node.childNodes.length > 0
cloneNode()方法用于克隆一個節點。它接受一個布爾值作為參數，表示是否同時克隆子節點。它的返回值是一個克隆出來的新節點。
該方法有一些使用注意點
（1）克隆一個節點，會拷貝該節點的所有屬性，但是會喪失addEventListener方法和on-屬性（即node.onclick = fn），添加在這個節點上的事件回調函數。
（2）該方法返回的節點不在文檔之中，即沒有任何父節點，必須使用諸如Node.appendChild這樣的方法添加到文檔之中。
（3）克隆一個節點之后，DOM 有可能出現兩個有相同id屬性（即id="xxx"）的網頁元素，這時應該修改其中一個元素的id屬性。如果原節點有name屬性，可能也需要修改。insertBefore()方法用于將某個節點插入父節點內部的指定位置。
-* insertBefore()***方法接受兩個參數，第一個參數是所要插入的節點newNode，第二個參數是父節點parentNode內部的一個子節點referenceNode。newNode將插在referenceNode這個子節點的前面。返回值是插入的新節點newNoderemoveChild()*方法接受一個子節點作為參數，用于從當前節點移除該子節點。返回值是移除的子節點。
replaceChild()方法用于將一個新的節點，替換當前節點的某一個子節點。
-
contains()方法返回一個布爾值，表示參數節點是否滿足以下三個條件之一。
- 參數節點為當前節點。
- 參數節點為當前節點的子節點。
- 參數節點為當前節點的后代節點。
isEqualNode()*方法返回一個布爾值，用于檢查兩個節點是否相等。所謂相等的節點，指的是兩個節點的類型相同、屬性相同、子節點相同。
isSameNode()*方法返回一個布爾值，表示兩個節點是否為同一個節點。
normailize()*方法用于清理當前節點內部的所有文本節點（text）。它會去除空的文本節點，并且將毗鄰的文本節點合并成一個，也就是說不存在空的文本節點，以及毗鄰的文本節點。
getRootNode()*方法返回當前節點所在文檔的根節點。
...
NodeList 接口
節點都是單個對象，有時需要一種數據結構，能夠容納多個節點。DOM 提供兩種節點集合，用于容納多個節點：NodeList和HTMLCollection。
這兩種集合都屬于接口規范。許多 DOM 屬性和方法，返回的結果是NodeList實例或HTMLCollection實例。
注意，NodeList 實例可能是動態集合，也可能是靜態集合。
所謂動態集合就是一個活的集合，DOM 刪除或新增一個相關節點，都會立刻反映在 NodeList 實例。
目前，只有Node.childNodes返回的是一個動態集合，其他的 NodeList 都是靜態集合。
HTMLCollection 接口
HTMLCollection是一個節點對象的集合，只能包含元素節點（element），不能包含其他類型的節點。它的返回值是一個類似數組的對象，但是與NodeList接口不同，HTMLCollection沒有forEach方法，只能使用for循環遍歷。
返回HTMLCollection實例的，主要是一些Document對象的集合屬性，比如document.links、docuement.forms、document.images等。
HTMLCollection實例都是動態集合，節點的變化會實時反映在集合中。
這里只羅列了一部分DOM的節點API。把常見的掌握了，如果想了解更多的API,建議查看官方文檔。
DOM的API挺反人類的，并不是很友好，所以就產生了jQuery....
