在JavaScript中，document這個對象大家一定很熟悉，哪怕是剛剛開始學習的新人，也會很快接觸到這個對象。而document對象不僅僅是一個普通的JavaScript內置對象，它還是一個巨大API的核心對象，這個巨大的API就是DOM（Document Object Model），它將文檔的內容呈現在JS面前，並賦予了JS操作文檔的能力。
在這里不得不提的概念則是DOM樹，DOM樹體現着HTML頁面的層級結構，學習中經常提到的父元素子元素的說法也是建立在樹這種數據結構的基礎之上的。而DOM樹有DOM文檔樹和DOM元素樹兩種，上圖就是一顆DOM元素樹，它只包含元素節點，而DOM文檔樹則包含文檔中所有內容。
一顆DOM元素樹
一篇HTML文檔及其DOM文檔樹。
HTML頁面中的所有內容都會體現在DOM文檔樹中，要理解這種結構，對構成它的每個節點就要先有了解。下面是DOM節點的基本類別，以及各自類別基本屬性的值及簡單介紹：
| 節點類型 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素節點 | 1 | 標簽名（大寫） | null |
| 屬性節點 | 2 | 屬性名 | 屬性值 |
| 文本節點 | 3 | #text | 文本內容 |
| CDTAT節點 | 4 | #cdata-section | CDATA區域的內容 |
| 實體引用名稱節點 | 5 | 引用名稱 | null |
| 實體名稱節點 | 6 | 實體名稱 | null |
| 處理指令節點 | 7 | target | entire content cluding the target |
| 注釋節點 | 8 | #comment | 注釋內容 |
| 文檔節點 | 9 | #document | null |
| 文檔類型節點 | 10 | doctype的名稱 | null |
| 文檔片段節點 | 11 | #document-fragment | null |
| DTD聲明節點 | 12 | 符號名稱 | null |
注：1、在以上的節點分類中，nodeType為4、5、6、7、12的四種節點，是針對XML文檔而言的，在HTML中並未出現，在這里就不詳細介紹了。
2、在以下演示中，默認已經定義了此方法：
一、元素節點
每一個HTML標簽都是一個元素節點：
運行及結果： 
二、屬性節點
元素的屬性在DOM中以屬性節點來表示。
運行及結果：
這里需要特殊說明下，一般獲取屬性節點都會直接想到使用DOM中的getAttribute（）方法或者直接根據屬性名用‘.’去訪問，然而在操作過程中，JavaScript會直接將獲得的值轉換成字符串，而不是以屬性節點的方式呈現，就無法訪問它的nodeType等屬性了，如下：
關於屬性節點，還有一個重點：屬性節點不是HTML DOM樹中的一部分 如下：
沒有辦法通過DOM遍歷方法獲取屬性節點，只能通過attributes屬性、getAttributes（）方法以及‘.’來訪問屬性節點。
三、文本節點
直觀理解，文本節點即是指向文本的節點~
運行及結果：
以上三種節點是在日常使用中最常見的三種節點了，另外幾種節點使用並不多：
四、注釋節點
別以為代碼注釋是只能在開發環境中看到的~在瀏覽器內HTML文檔中，同樣包含着注釋節點，我們可以對其進行各種DOM操作，只不過注釋節點不會渲染在頁面中而已。
運行及結果：
五、文檔節點：
文檔節點表示整個文檔，也是DOM文檔樹的根節點。
六、文檔類型節點
運行及結果：
七、文檔片段節點
文檔片段節點是我在寫本篇博客的時候還幾乎一無所知的一種節點，在這里學習了這篇博客：深入理解DOM節點類型第四篇——文檔片段節點DocumentFragment
以下是現學現賣：
DocumentFragment，文檔片段節點，是唯一在HTML文檔中沒有對應標記的節點，也就是說它不會在我們編寫HTML代碼的時候出現在我們的視野中。文檔片段是一種輕量級的文檔，可以包含很多DOM節點。在前端操作中，常常需要對文檔樹中的DOM節點做各種各樣的操作，這個時候，對應的操作就會造成頁面重繪。如果DOM操作非常多的話，就會不斷地進行頁面重繪，帶來沉重的瀏覽器負擔，拖慢運行速度。
如果將節點加入文檔片段之中，這些節點就會脫離文檔樹，這個時候進行DOM操作的話就不會造成頁面重繪。等大量DOM操作都執行完成之后，再將文檔片段添加到頁面中，這時完成操作的節點會一次性渲染完畢，避免了多次渲染帶來的性能拖慢。
要使用文檔片段，JavaScript提供了document.createDocumentFragment()方法。關於文檔片段的具體使用和性能提升，會在另外的博文中另行研究，這里看一下文檔片段節點的信息：
八、DTD聲明節點
DTD為Document Type Definition，為文檔類型定義。實際上DTD節點也是主要針對XML文檔而言的，在HTML中也不直接含有DTD聲明節點，只有包含着DTD聲明的文檔類型節點（10）。
我們都知道HTML有HTML4.01，XHTML等等，每種版本的標記語言中還有三種細分的定義：Strict（嚴格）、Transitional（過渡）、Frameset（框架集）。如果沒寫DTD，瀏覽器就不知道正在處理的文檔是用哪種標記語言來寫的，就造成了解析結果的不同，最常見的錯誤就是用XHTML較為嚴格的規范來解析以HTML這種寬松標准所構建的文本，自然會出現很多問題。w3c給出的解釋是：由於HTML4.01基於SGML，DTD規定了標記語言的規則，故需要在HTML聲明中引用DTD。在如今的HTML5時代，由於HTML5不基於SGML，故我們也不再需要在文檔聲明中包含DTD信息，使用<!DOCTYPE HTML>即可。
以上就是HTML DOM節點的分類以及簡單介紹了，關於節點的各種屬性以及方法請點擊：