DOM（文件物件模型）的12個節點型別

當瀏覽器載入HTML的時候 會生成相應的DOM樹。這個樹自然有很多節點 。這些節點雖然都繼承Node型別，但是這些節點可能分屬於不同的子節點型別。

首先我們看一下Node類，此類為基類。
因此 這個類的方法和屬性會被所有的節點共同繼承。
屬性：
int nodeType//doc 9, element 1, text 3
boolean DOCUMENT_NODE
nodeName 對於元素節點 nodeName就是標籤名 對於文字節點 nodeName為”#text”(chrome裡面測試的)
nodeValue 　對於元素節點nodeValue就是null, 對於文字節點 nodeValue就是實際的值
NodeList<> childNodes: 每個節點還有childNodes屬性，這是個十分重要的屬性，它儲存了這個節點所有直接子元素。呼叫childNodes返回的是一個NodeList物件，它極其像陣列，但是有一個最關鍵的地方，它是動態查詢的，也就是說每次呼叫它都會對DOM結構查詢，所以對它的使用需要慎重，注意效能。訪問childNodes可以使用陣列下表或者item方法。
hasChildNodes() //如果包含子節點就返回true，比查詢childNodes的length來的簡單。
ownerDocument //返回文件節點的引用（在html裡面也就是document物件）
appendChild()方法 //可以在節點的childNodes的末尾增加一個節點，值得注意的是如果這個節點是已經存在在文件中的，那麼便會刪除原節點，感覺上就像是移動節點一樣。
insertBefore()方法 //接受兩個引數，一個是插入的節點，另外一個是參照的節點。如果第二個引數為null，則insertBefore和appendChild效果一樣。否則便會把節點插入到參照節點之前。這裡要注意的是，如果第二個引數不為null，那麼插入的節點不能是已經存在的節點。
replaceChild() //方法可以替換節點，接受兩個引數，需要插入的節點和需要替換的節點。返回被替換掉的節點。
removeChild() //移除節點。這裡有個常見需求，比如我有一個節點 #waste-node ，那麼如何移除它呢？

var wasteNode =  document.getElementById("waste-node");
wasteNode.parentNode.removeClhid(wasteNode);    // 先拿到父節點，再呼叫removeClild刪除自己

parentNode: //找到父節點
cloneNode(); //複製節點，接受一個引數 true或者false。如果true就是複製那個節點和它的子節點。如果是false，就是複製節點本身（複製出來的節點就會沒有任何子元素）。這個方法返回複製的節點，如果需要操作它，那麼需要藉助前面講的4個方法來把這個節點放入到html中去。

然後講一下比較重要的一些子類：

Document型別：
屬性：
　　document.childNodes 繼承自上面講的Node型別，可以返回文件的直接子節點（通常包括文件宣告和html節點）

document.documentElement 可以直接拿到html節點的引用（等價於document.getElementsByTagName(“html”)[0])。

document.body body節點的引用

document.title 頁面的title，可以修改，會改變瀏覽器標籤上的名字

document.URL 頁面的url

document.referrer 取得referrer，也就是開啟這個頁面的那個頁面的地址，做來源統計時候比較有用

document.domain 取得域名，可以設定，但是通常只能設定為不包含子域名的情況，在一些子域名跨域情況下有效。

方法：
getElementById： 傳入id，得到元素節點。裡面的引數區分大小寫（IE8-不區分）。注意：如果有多個id相同的元素，則返回第一個。IE7-裡面表單元素的name也會被當做id來使用。
getElementsByTagName： 根據標籤取得元素，得到的是HTMLCollection型別。如果傳入的是 “*” ，則可以取得全部元素。
write() writeln() open() close()： open和close分別是開啟和關閉網頁的輸出流，在頁面載入過程中，就相當於open狀態。這兩個方法一般不會去用它。然後重要的方法就是write和writeln，它們都是向頁面寫入東西，區別就是後者會多加入一個換行符。
注意的是：在頁面載入的過程中，可以使用這兩個方法向頁面新增內容。如果頁面已經載入完了，再呼叫write，會重寫整個頁面。
還有一點，如果要動態寫入指令碼 例如 分開來拼裝下，否則會被誤以為是指令碼結束的標誌，導致這個結束符匹配到上面一個開始符。可以這樣寫"<scr" + “ipt>”;

Element類：
這個型別可以說是相當重要：
我們日常所操作的都是Element型別（實質是HTMLElement，這裡為了方便理解，就簡單這麼說），比如document.getElementById("test")返回的就是Element型別。
屬性：
String tagName
Element類還有一種子類 叫HTMLElement型別，是HTML元素的實際型別。這個型別有一些標準屬性，比如：id, title, className （這三個型別是可讀寫的） ，此外 還有幾個重要的方法：getAttribute, setAttribute, removeAttribute（這三個方法是我們常用來取自己自定義的屬性，預定義的屬性我們可以直接取用）.此外還有一個屬性 叫做attributes(儲存了元素的全部屬性)。
那麼 如何建立元素並且初始化其屬性呢？用下面的操作：

document.createElement("div");
//之後為元素設定屬性：兩種方法：直接node.property或者node.setAttribute("propertyName","value")
//但是做完這些之後，這個元素還是沒有在頁面中，所以你還得通過最上面講的類似appendChild這些方法把元素新增到頁面裡面。

Text類：
這個型別也非常常見
簡單的來說 這個就是一段字串。而且一個很重要的特徵就是 這種型別的節點沒有子節點。
訪問這個節點的內容 可以通過nodeValue或者data屬性。
此外 還有
appendData()用於在末尾新增內容
deleteData(offset, count) //在Index==offset起刪除count個字元。
還有insertDate、replaceData、splitText等方法，就不一一說了，用的機會很少，可以用的時候再查閱。
length:返回字串長度
建立文字節點的方法是document.createTextNode.

Comment類
註釋節點

DocumentType類
docttype節點，通過document.doctype來訪問

DocumentFragment類
此節點是一個文件片段 偶爾會用到。使用場景：
比如一種常見的用法是，在一個ul中插入3個li。如果你迴圈插入3次，那麼瀏覽器就要渲染3次，對效能有蠻大的影響。所以大家一般這麼做。先var fragment = document.createDocumentFragment();然後迴圈把li，用appendChild插入到fragment裡面。　最後在一次把fragment插入到ul裡面。這樣就會很快。

最後要說明一下一些問題：
1 瀏覽器為了方便開發者 擴充套件了一些DOM功能。我們在使用的時候要注意相容性的問題。
我們利用document.compatMode和document.documentMode來判斷當前模式是標準模式還是混雜模式。
2 上面不是說了一個文字節點作為第一子元素的坑嗎，所以瀏覽器又實現了一個children屬性，這個屬性只包含元素節點。為了方便判斷A節點是不是B節點的子節點，引入了contains方法，比如B.contains(A); // true就代表是，false就代表不是
3 針對訪問元素，有四個額外方法可以供使用：innerText/innerHTML/outerTEXT/outerHTML。其中，而outer*則是代表是否包含元素本身。*TEXT是返回文字內容 *HTML是返回html文字。實際使用來看，在讀內容的時候 inner和outer沒有區別。