前言
DOM的作用是將網頁轉為一個javascript對象，從而可以使用javascript對網頁進行各種操作(比如增刪內容)。瀏覽器會根據DOM模型，將HTML文檔解析成一系列的節點，再由這些節點組成一個樹狀結構。 DOM的最小組成單位叫做節點(node)，文檔的樹形結構(DOM樹)由12種類型的節點組成。
屬性
一般地，節點至少擁有nodeType 、 nodeName和nodeValue這三個基本屬性。
節點類型不同，這三個屬性的值也不相同
nodeType
nodeType屬性返回節點類型的常數值。不同的類型對應不同的常數值，12種類型分別對應1到12的常數值
元素節點Node.ELEMENT_NODE(1)
屬性節點Node.ATTRIBUTE_NODE(2)
文本節點Node.TEXT_NODE(3)
CDATA節點Node.CDATA_SECTION_NODE(4)
實體引用名稱節點Node.ENTRY_REFERENCE_NODE(5)
實體名稱節點Node.ENTITY_NODE(6)
處理指令節點Node.PROCESSING_INSTRUCTION_NODE(7)
註釋節點Node.COMMENT_NODE(8)
文檔節點Node.DOCUMENT_NODE(9)
文檔類型節點Node.DOCUMENT_TYPE_NODE(10)
文檔片段節點Node.DOCUMENT_FRAGMENT_NODE(11)
DTD聲明節點Node.NOTATION_NODE(12)
DOM定義了一個Node接口，這個接口在javascript中是作為Node類型實現的，而在IE8-瀏覽器中的所有DOM對像都是以COM對象的形式實現的。所以，IE8-瀏覽器並不支持Node對象的寫法
//在標準瀏覽器下返回1，而在IE8-瀏覽器中報錯，提示Node未定義console.log(Node.ELEMENT_NODE);//1
nodeName
nodeName屬性返回節點的名稱
nodeValue
nodeValue屬性返回或設置當前節點的值，格式為字符串
接下來，將按照節點類型的常數值對應順序，從1到12進行詳細說明
【1】元素節點
元素節點element對應網頁的HTML標籤元素。元素節點的節點類型nodeType值是1，節點名稱nodeName值是大寫的標籤名，nodeValue值是null
以body元素為例
// 1 'BODY' nullconsole.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)console.log(Node.ELEMENT_NODE === 1);//true
【2】特性節點
元素特性節點attribute對應網頁中HTML標籤的屬性，它只存在於元素的attributes屬性中，並不是DOM文檔樹的一部分。特性節點的節點類型nodeType值是2，節點名稱nodeName值是屬性名，nodeValue值是屬性值
現在，div元素有id="test"的屬性
<div id="test"></div><script>var attr = test.attributes.id;//2 'id' 'test'console.log(attr.nodeType,attr.nodeName,attr.nodeValue)console.log(Node.ATTRIBUTE_NODE === 2);//true </script>
【3】文本節點
文本節點text代表網頁中的HTML標籤內容。文本節點的節點類型nodeType值是3，節點名稱nodeName值是'#text'，nodeValue值是標籤內容值
現在，div元素內容為'測試'
<div id="test">測試</div><script>var txt = test.firstChild;//3 '#text' '測試'console.log(txt.nodeType,txt.nodeName,txt.nodeValue)console.log(Node.TEXT_NODE === 3);//true </script>
【4】CDATA節點
CDATASection類型只針對基於XML的文檔，只出現在XML文檔中，表示的是CDATA區域，格式一般為
<![CDATA[]]>
該類型節點的節點類型nodeType的值為4，節點名稱nodeName的值為'#cdata-section'，nodevalue的值是CDATA區域中的內容
【5】實體引用名稱節點
實體是一個聲明，指定了在XML中取代內容或標記而使用的名稱。 實體包含兩個部分， 首先，必須使用實體聲明將名稱綁定到替換內容。 實體聲明是使用<!ENTITY name "value"> 語法在文檔類型定義(DTD)或XML架構中創建的。其次，在實體聲明中定義的名稱隨後將在XML 中使用。 在XML中使用時，該名稱稱為實體引用。
實體引用名稱節點entry_reference的節點類型nodeType的值為5，節點名稱nodeName的值為實體引用的名稱，nodeValue的值為null
//實體名稱<!ENTITY publisher "Microsoft Press">//實體名稱引用<pubinfo>Published by &publisher;</pubinfo>
【6】實體名稱節點
上面已經詳細解釋過，就不再贅述
該節點的節點類型nodeType的值為6，節點名稱nodeName的值為實體名稱，nodeValue的值為null
【7】處理指令節點
處理指令節點ProcessingInstruction的節點類型nodeType的值為7，節點名稱nodeName的值為target，nodeValue的值為entire content excluding the target
【8】註釋節點
註釋節點comment表示網頁中的HTML註釋。註釋節點的節點類型nodeType的值為8，節點名稱nodeName的值為'#comment'，nodeValue的值為註釋的內容
現在，在id為myDiv的div元素中存在一個<!-- 我是註釋內容-->
<div id="myDiv"><!-- 我是註釋內容--></div><script>var com = myDiv.firstChild;//8 '#comment' '我是註釋內容'console.log(com.nodeType,com.nodeName,com.nodeValue)console.log(Node.COMMENT_NODE === 8);//true </script>
【9】文檔節點
文檔節點document表示HTML文檔，也稱為根節點，指向document對象。文檔節點的節點類型nodeType的值為9，節點名稱nodeName的值為'#document'，nodeValue的值為null
<script>//9 "#document" nullconsole.log(document.nodeType,document.nodeName,document.nodeValue)console.log(Node.DOCUMENT_NODE === 9);//true </script>
【10】文檔類型節點
文檔類型節點DocumentType包含著與文檔的doctype有關的所有信息。文檔類型節點的節點類型nodeType的值為10，節點名稱nodeName的值為doctype的名稱，nodeValue的值為null
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>var nodeDocumentType = document.firstChild;//10 "html" nullconsole.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);console.log(Node.DOCUMENT_TYPE_NODE === 10);</script></body></html>
【11】文檔片段節點
文檔片段節點DocumentFragment在文檔中沒有對應的標記，是一種輕量級的文檔，可以包含和控制節點，但不會像完整的文檔尋親戰勝額外的資源。該節點的節點類型nodeType的值為11，節點名稱nodeName的值為'#document-fragment'，nodeValue的值為null
<script>var nodeDocumentFragment = document.createDocumentFragment(); //11 "#document-fragment" nullconsole.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true</script>
【12】DTD聲明節點
DTD聲明節點notation代表DTD中聲明的符號。該節點的節點類型nodeType的值為12，節點名稱nodeName的值為符號名稱，nodeValue的值為null
總結
在這12種DOM節點類型中，有一些適用於XML文檔，有一些是不常用的類型。而對於常用類型，後面會陸續進行詳細介紹，本文對這12種節點類型只做概述，希望本文對大家能有所幫助。