DOM是所有前端開發每天打交道的東西，但是隨着jQuery等庫的出現，大大簡化了DOM操作，導致大家慢慢的“遺忘”了它的本來面貌。不過，要想深入學習前端知識，對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是所有節點的基類型，所有節點都繼承自它，所以所有節點都有一些共同的方法和屬性。
先講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刪除自己
這里先暫停一下，不知道大家注意到沒有，以上的幾個方法都是操作某個節點的子節點，也就是說，操作前必須找到父節點（通過parentNode來找）
接下來說下復制節點的方法：
cloneNode();復制節點，接受一個參數 true或者false。如果true就是復制那個節點和它的子節點。如果是false，就是復制節點本身（復制出來的節點就會沒有任何子元素）。這個方法返回復制的節點，如果需要操作它，那么需要借助前面講的4個方法來把這個節點放入到html中去。
至此，Node類型的常見屬性和方法都介紹完了。結合開頭講的，所有節點類型都繼承自Node類型，所以這些方法是所有節點都有的。
三、Document類型
最開始講DOM是什么的時候提到了Document類型。其實關於這個類型最重要的是它的一個子類HTMLDocument有一個實例對象document。而這個document對象是我們最常用的一個對象了。
document對象又掛載在window對象上，所以在瀏覽器就可以直接訪問document了。
老規矩，先講講document對象的屬性，等會講講它的方法。
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 和 getElementsByTagName
getElementById，傳入id，得到元素節點。里面的參數區分大小寫（IE8-不區分）。注意：如果有多個id相同的元素，則返回第一個。IE7-里面表單元素的name也會被當做id來使用。
getElementsByTagName 根據標簽取得元素，得到的是HTMLCollection類型。如果傳入的是 "*" ，則可以取得全部元素。
還有一個是只有HTMLDocument類型（也就是document對象）才有的方法 getElementsByName 顧名思義，根據name返回元素。
document對象還有一些集合，例如document.forms 可以返回所有的form表單。類型也是HTMLCollection。
說到HTMLCollection，就再說說它
HTMLCollection就是一個包含一個或多個元素的集合，和上面講的NodeList還挺像的。HTMLCollection這個類型有兩個方法，一個是通過下標（或者.item()）得到具體元素，還有就是通過['name']（或者.namedItem()）獲得具體元素。
最后，關於document對象還有一套重要的方法，那便是
write() writeln() open() close()
open和close分別是打開和關閉網頁的輸出流，在頁面加載過程中，就相當於open狀態。這兩個方法一般不會去用它。
然后重要的方法就是write和writeln，它們都是向頁面寫入東西，區別就是后者會多加入一個換行符。
注意的是：在頁面加載的過程中，可以使用這兩個方法向頁面添加內容。如果頁面已經加載完了，再調用write，會重寫整個頁面。
還有一點，如果要動態寫入腳本 例如 <script>xxx</script>這樣的 ，那么要注意把</script>分開來拼裝下，否則會被誤以為是腳本結束的標志，導致這個結束符匹配到上面一個開始符。可以這樣寫"<scr" + "ipt>";
四、Element類型
接下來講講最重要也是最常見的一個類型，Element類型。
我們日常所操作的都是Element類型（實質是HTMLElement，這里為了方便理解，就簡單這么說），比如
document.getElementById("test")
返回的就是Element類型。我們日常所說的“DOM對象”，通常也就是指Element類型的對象。
然后說說這個類型的常見屬性：
首先最開始說的Node類型上的那些屬性方法它都有，這個就不再重復了，主要說說它自己獨有的。
首先是tagName，這個和繼承自Node類型的nodeName一樣。都是返回標簽名，通常是大寫，結果取決於瀏覽器。所以在做比較
的時候最好是調用下類似toLowerCase()這種方法再做比較。
說說上面提到過的HTMLElement類型
HTMLElement類型繼承自Element類型，也是HTML元素的實際類型，我們在瀏覽器里用的元素都是這個類型。
這個類型都具有一些標准屬性，比如：
id 元素的唯一標識
title 通常是鼠標移上去時候會顯示的信息
className 類名
等等，這幾個屬性是可讀寫的，也就是說你改變他們會得到相應的效果。
除了屬性外，還有幾個重要的方法
首先說說操作節點屬性的方法
getAttribute 、setAttribute 、removeAttribute這3個方法。
這些是操作屬性最常用的方法了，怎么用就不說了，很簡單，顧名思義。
還有一個attributes屬性，保存了元素的全部屬性。
這里停下來，出個問題，ele.className 和 ele.getAttribute("class")返回的結果是不是同一個東西？
解答這個問題，我要說一個重要知識點，一個元素的屬性結構是這么來的，比如一個inpnt元素
<input id="test" checked="checked">
那么這個元素的屬性被包含在 input.attributes里面，比如你在html元素上看到的class、id或者你自己定義的data-test這種屬性。
然后 getAttribute 、setAttribute 、removeAttribute這3個方法可以認為是快捷的取attributes集合的方法。而直接input.id或者input.className都是直接掛在input下的屬性，和attributes是同級的。所以返回的東西也許看過去一樣，實際是不一樣的，不信你可以試試input.checked這input.getAttribute("checked")試試。
關於這個知識點，詳細的說可以再寫一篇文章，在我的博客 從is(":checked")說起 中有談到過，大家可以看看這篇文章和文章后的討論，便可以知道是怎么一回事。
總得來說，這3個方法通常用了處理自定義的屬性，而不是id、class等這種“公認特性”。
接下來說說創建元素
document.createElement()可以創建一個元素，比如：
document.createElement("div");
一般之后可以為元素設置屬性，兩種方法，一種是直接node.property還可以node.setAttribute("propertyName","value")。等
但是做完這些之后，這個元素還是沒有在頁面中，所以你還得通過最上面講的類似appendChild這些方法把元素添加到頁面里面。
在IE中，還可以直接穿整個HTML字符串進去，來創建元素，比如
document.createElement("<div>test</div>");
最后，元素節點也支持HTMLDocument類型的那些查找方法，比如getElementsByTagName。不過它只會找自己后代的節點。所以可以這么寫代碼
document.getElementById("test").getElementsByTagName("div"); // 找到id為test元素下的所有div節點
五、Text類型
這個類型很特殊，也是第三常見類型（第一第二分別就是Document和Element）。
這個節點簡單來說就是一段字符串。
有個很重要的特征就是，它沒有子元素（不過這個仔細想想也知道= =）
訪問text節點的文本內容，可以通過nodeValue或者data屬性。
下面簡單說說它提供的一些方法
appendData(); // 在text末尾加內容 deleteData(offset, count); // 從offset指定的位置開始刪除count個字符
還有insertDate、replaceData、splitText等方法，就不一一說了，用的機會很少，可以用的時候再查閱。
然后它還有一個lenght屬性，返回字符長度的。
這里說一個常見的坑。比如下面這個html結構
<ul> <li></li> <li></li> </ul>
這里，ul的第一個子節點（firstChild）是什么呢？第一眼看過去，肯定認為是li了，但是實際上，你會發現不是li，而是一個文本節點！
這是因為瀏覽器認為ul和第一個li之間有空白字符，所以就有文本節點了。
這里一個常見的問題就是遍歷ul的childNodes的時候，遍歷的元素一定要判斷下nodeType是不是等於1（等於1就代表是元素節點），這樣才能跳過這個坑。否則你也可以刪除所有的空格和換行符。
創建文本節點的方法是document.createTextNode
然后接下來和操作Element類型一樣，就是再插入到元素中，瀏覽器就可以看到了。
六、其他的一些類型 Comment、DocumentType和DocumentFragment
這些不常用的一句話帶過把
Comment是注釋節點
DocumentType就是doctype節點，通過docment.doctype來訪問
DocumentFragment這個節點是一個文檔片段，偶爾會用到。
比如一種常見的用法是，在一個ul中插入3個li。
如果你循環插入3次，那么瀏覽器就要渲染3次，對性能有蠻大的影響。
所以大家一般這么做
先
var fragment = document.createDocumentFragment();
然后循環把li，用appendChild插入到fragment里面
最后在一次把fragment插入到ul里面。這樣就會很快。
七、DOM擴展
進過上面講的這么多節點類型，想必大家對DOM節點已經有了很深的了解，下面講一講DOM擴展的一些東西。
瀏覽器為了方便開發者，擴展了一些DOM功能。
因為是瀏覽器自己擴展的，所以使用前兼容性問題一定要注意
判斷“標准模式”和“混雜模式”通過 document.compatMode和新的document.documentMode
上面不是說了一個文本節點作為第一子元素的坑嗎，所以瀏覽器又實現了一個children屬性，這個屬性只包含元素節點。
為了方便判斷A節點是不是B節點的子節點，引入了contains方法，比如
B.contains(A); // true就代表是，false就代表不是
這個方法有兼容性問題，使用前可以谷歌解決方法。
針對訪問元素，又提供了4個方法innerText/innerHTML/outerTEXT/outerHTML。
通過這些方法，可以讀和寫元素。
其中，*TEXT是返回文本內容 *HTML是返回html文本。
而outer*則是代表是否包含元素本身。
實際使用來看，在讀內容的時候 inner*和outer*沒有區別。
在把內容寫入元素的時候，就是是否包含元素本身的區別。
重要的是，這幾個方法有性能問題，比如在IE中，通過inner*刪除的節點，其綁定的事件依然在內存中，就很容易消耗大量內存。
還有一個技巧是，插入大量的html代碼，用innerHTML是非常快的，建議使用。
八、總結
首先感謝所有看到這里的朋友，哈哈，關於DOM的東西實在是太多了，不過這也算是最重要的一個前端知識點之一吧。文章比較長，也許有點乏味，不過希望你們耐着性子看完后可以有所收貨^ ^。
我的筆記又更新了，這次主要更新了一個 移動端單頁宣傳頁開發方法 ，大家可以去看看^ ^。
九、MORE
var parentWindow = document.defaultView || document.parentWindow;
var iframe = document.getElementById("myIframe"); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
最后說說元素的大小
取得元素的寬高 就使用 offsetHeight/offsetWidth，注意，不包括margin部分
得到元素的偏移值就復雜了一點，有兩個方法offsetTop/offsetLeft，但是這兩個方法是指元素針對與它的offsetParent對象而言的，所以，如果你想得到元素距離視口的位置，那么還需要找到offsetParent,計算他們的offsetTop/offsetLeft，在找offsetParent的offsetParent，如此循環直到offsetParent為null。注意，這個計算的位置也不包括margin部分。
上面說的是不包括margin，然后還有一組屬性clientWidth/clientHeight，它們也可以得到寬高，但是它們是不包括margin和border，也不計算滾動條。
最后，滾動的位置與距離，這個很難說清，大家直接看圖比較清楚明了。
其中，scrollLeft和scrollTop是可以設置的，如果你把scrollTop設置成 "10px"，那么元素就是滾動到10px的地方去。
轉載本站文章請注明作者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途