DOM是所有前端開發每天打交道的東西，但是隨著jQuery等庫的出現，大大簡化了DOM操作，導致大家慢慢的“遺忘”了它的本來面貌。不過，要想深入學習前端知識，對DOM的了解是不可或缺的，所以本文力圖系統的講解下DOM的相關知識，如有遺漏或錯誤，還請大家指出一起討論^ ^。

DOM（文檔對象模型）是針對HTML和XML文檔的一個API，通過DOM可以去改變文檔。

這個說法很官方，大家肯定還是不明白。

舉個例子：我們有一段HTML，那么如何訪問第二層第一個節點呢，如何把最后一個節點移動到第一個節點上面去呢？

DOM就是定義了如果做類似操作，那么應該怎么做的標準。比如用getElementById來訪問節點，用insertBefore來插入節點。

當瀏覽器載入HTML時，會生成相應的DOM樹。

簡而言之，DOM可以理解為一個訪問或操作HTML各種標簽的實現標準。

對于一個HTML來說，文檔節點Document（看不到的）是它的根節點，對應的對象便是document對象（嚴格講是子類HTMLDocument對象，下面單獨介紹Document類型時會指出）。

換句話說存在一個文檔節點Document，然后它有子節點，比如通過document.getElementsByTagName(“html”)，得到類型為元素節點的Element html。

每一段HTML標記都可以用相應的節點表示，例如：

HTML元素通過元素節點表示，注釋通過注釋節點表示，文檔類型通過文檔類型節點表示等。

一共定義了12種節點類型，而這些類型又都繼承自Node類型。

所以我們首先講Node類型，因為這個類型的方法是所有節點都會繼承的。

Node是所有節點的基類型，所有節點都繼承自它，所以所有節點都有一些共同的方法和屬性。

先講Node類型的屬性

首先是nodeType屬性，用來表明節點類型的，例如：

document.nodeType; // 返回 9 ，其中document對象為文檔節點Document的實例

這里面，9代表的就是DOCUMENT_NODE節點的意思，可以通過Node.DOCUMENT_NODE查看節點對應的數字

document.nodeType === Node.DOCUMENT_NODE; // true

至于一共有哪些節點，每個節點對應的數字又是多少，這個可以問谷歌就知道了。反正常用的就是元素節點Element(對應數字為1)和文本節點Text(對應數字為3)

然后常用的還有nodeName和nodeValue

對于元素節點 nodeName就是標簽名，nodeValue就是null

對于文本節點 nodeName為”#text”(chrome里面測試的),nodeValue就是實際的值

每個節點還有childNodes屬性，這是個十分重要的屬性，它保存了這個節點所有直接子元素

調用childNodes返回的是一個NodeList對象，它極其像數組，但是有一個最關鍵的地方，它是動態查詢的，也就是說每次調用它都會對DOM結構查詢，所以對它的使用需要慎重，注意性能。

訪問childNodes可以使用數組下表或者item方法

然后各個節點還存在各種屬性讓它們可以相互訪問，下圖很好的總結了

比較有用的方法和屬性：

1、hasChildNodes()

如果包含子節點就返回true，比查詢childNodes的length來的簡單。

2、ownerDocument

返回文檔節點的引用（在html里面也就是document對象）

再介紹下Node類型常用的方法

appendChild()方法可以在節點的childNodes的末尾增加一個節點，值得注意的是如果這個節點是已經存在在文檔中的，那么便會刪除原節點，感覺上就像是移動節點一樣。

insertBefore()方法接受兩個參數，一個是插入的節點，另外一個是參照的節點。如果第二個參數為null，則insertBefore和appendChild效果一樣。否則便會把節點插入到參照節點之前。這里要注意的是，如果第二個參數不為null，那么插入的節點不能是已經存在的節點。

replaceChild()方法可以替換節點，接受兩個參數，需要插入的節點和需要替換的節點。返回被替換掉的節點。

removeChild()移除節點。這里有個常見需求，比如我有一個節點 #waste-node ，那么如何移除它呢？

var wasteNode = document.getElementById( waste-node wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父節點，再調用removeClild刪除自己        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。