前言

DOM的作用是將網(wǎng)頁轉(zhuǎn)為一個javascript對象，從而可以使用javascript對網(wǎng)頁進行各種操作(比如增刪內(nèi)容)。瀏覽器會根據(jù)DOM模型，將HTML文檔解析成一系列的節(jié)點，再由這些節(jié)點組成一個樹狀結(jié)構(gòu)。DOM的最小組成單位叫做節(jié)點(node)，文檔的樹形結(jié)構(gòu)(DOM樹)由12種類型的節(jié)點組成。

屬性

一般地，節(jié)點至少擁有nodeType、nodeName和nodeValue這三個基本屬性。

節(jié)點類型不同，這三個屬性的值也不相同

nodeType

nodeType屬性返回節(jié)點類型的常數(shù)值。不同的類型對應(yīng)不同的常數(shù)值，12種類型分別對應(yīng)1到12的常數(shù)值

     元素節(jié)點            　　     Node.ELEMENT_NODE(1)

     屬性節(jié)點            　　     Node.ATTRIBUTE_NODE(2)

     文本節(jié)點            　　     Node.TEXT_NODE(3)

     CDATA節(jié)點                    Node.CDATA_SECTION_NODE(4)

     實體引用名稱節(jié)點    　   Node.ENTRY_REFERENCE_NODE(5)

     實體名稱節(jié)點        　　   Node.ENTITY_NODE(6)

     處理指令節(jié)點        　　   Node.PROCESSING_INSTRUCTION_NODE(7)

     注釋節(jié)點            　         Node.COMMENT_NODE(8)

     文檔節(jié)點            　         Node.DOCUMENT_NODE(9)

     文檔類型節(jié)點        　　  Node.DOCUMENT_TYPE_NODE(10)

     文檔片段節(jié)點        　　  Node.DOCUMENT_FRAGMENT_NODE(11)

     DTD聲明節(jié)點                 Node.NOTATION_NODE(12)

DOM定義了一個Node接口，這個接口在javascript中是作為Node類型實現(xiàn)的，而在IE8-瀏覽器中的所有DOM對象都是以COM對象的形式實現(xiàn)的。所以，IE8-瀏覽器并不支持Node對象的寫法

//在標(biāo)準(zhǔn)瀏覽器下返回1，而在IE8-瀏覽器中報錯，提示Node未定義console.log(Node.ELEMENT_NODE);//1

nodeName

nodeName屬性返回節(jié)點的名稱

nodeValue

nodeValue屬性返回或設(shè)置當(dāng)前節(jié)點的值，格式為字符串

接下來，將按照節(jié)點類型的常數(shù)值對應(yīng)順序，從1到12進行詳細說明 

【1】元素節(jié)點

元素節(jié)點element對應(yīng)網(wǎng)頁的HTML標(biāo)簽元素。元素節(jié)點的節(jié)點類型nodeType值是1，節(jié)點名稱nodeName值是大寫的標(biāo)簽名，nodeValue值是null

以body元素為例

// 1 'BODY' nullconsole.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)console.log(Node.ELEMENT_NODE === 1);//true

【2】特性節(jié)點

元素特性節(jié)點attribute對應(yīng)網(wǎng)頁中HTML標(biāo)簽的屬性，它只存在于元素的attributes屬性中，并不是DOM文檔樹的一部分。特性節(jié)點的節(jié)點類型nodeType值是2，節(jié)點名稱nodeName值是屬性名，nodeValue值是屬性值

現(xiàn)在，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】文本節(jié)點
文本節(jié)點text代表網(wǎng)頁中的HTML標(biāo)簽內(nèi)容。文本節(jié)點的節(jié)點類型nodeType值是3，節(jié)點名稱nodeName值是'#text'，nodeValue值是標(biāo)簽內(nèi)容值

現(xiàn)在，div元素內(nèi)容為'測試'

<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節(jié)點

CDATASection類型只針對基于XML的文檔，只出現(xiàn)在XML文檔中，表示的是CDATA區(qū)域，格式一般為

<![CDATA[]]>

該類型節(jié)點的節(jié)點類型nodeType的值為4，節(jié)點名稱nodeName的值為'#cdata-section'，nodevalue的值是CDATA區(qū)域中的內(nèi)容 

【5】實體引用名稱節(jié)點

實體是一個聲明，指定了在XML中取代內(nèi)容或標(biāo)記而使用的名稱。 實體包含兩個部分， 首先，必須使用實體聲明將名稱綁定到替換內(nèi)容。 實體聲明是使用 <!ENTITY name "value"> 語法在文檔類型定義(DTD)或XML架構(gòu)中創(chuàng)建的。其次，在實體聲明中定義的名稱隨后將在 XML 中使用。 在XML中使用時，該名稱稱為實體引用。

實體引用名稱節(jié)點entry_reference的節(jié)點類型nodeType的值為5，節(jié)點名稱nodeName的值為實體引用的名稱，nodeValue的值為null

//實體名稱<!ENTITY publisher "Microsoft Press">//實體名稱引用<pubinfo>Published by &publisher;</pubinfo>

【6】實體名稱節(jié)點
上面已經(jīng)詳細解釋過，就不再贅述

該節(jié)點的節(jié)點類型nodeType的值為6，節(jié)點名稱nodeName的值為實體名稱，nodeValue的值為null

【7】處理指令節(jié)點

處理指令節(jié)點ProcessingInstruction的節(jié)點類型nodeType的值為7，節(jié)點名稱nodeName的值為target，nodeValue的值為entire content excluding the target

【8】注釋節(jié)點

注釋節(jié)點comment表示網(wǎng)頁中的HTML注釋。注釋節(jié)點的節(jié)點類型nodeType的值為8，節(jié)點名稱nodeName的值為'#comment'，nodeValue的值為注釋的內(nèi)容

現(xiàn)在，在id為myDiv的div元素中存在一個<!-- 我是注釋內(nèi)容 -->

<div id="myDiv"><!-- 我是注釋內(nèi)容 --></div><script>var com = myDiv.firstChild;//8 '#comment' '我是注釋內(nèi)容'console.log(com.nodeType,com.nodeName,com.nodeValue)console.log(Node.COMMENT_NODE === 8);//true </script>

【9】文檔節(jié)點

文檔節(jié)點document表示HTML文檔，也稱為根節(jié)點，指向document對象。文檔節(jié)點的節(jié)點類型nodeType的值為9，節(jié)點名稱nodeName的值為'#document'，nodeValue的值為null

<script>//9 "#document" nullconsole.log(document.nodeType,document.nodeName,document.nodeValue)console.log(Node.DOCUMENT_NODE === 9);//true </script>

【10】文檔類型節(jié)點

文檔類型節(jié)點DocumentType包含著與文檔的doctype有關(guān)的所有信息。文檔類型節(jié)點的節(jié)點類型nodeType的值為10，節(jié)點名稱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】文檔片段節(jié)點

文檔片段節(jié)點DocumentFragment在文檔中沒有對應(yīng)的標(biāo)記，是一種輕量級的文檔，可以包含和控制節(jié)點，但不會像完整的文檔尋親戰(zhàn)勝額外的資源。該節(jié)點的節(jié)點類型nodeType的值為11，節(jié)點名稱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聲明節(jié)點

DTD聲明節(jié)點notation代表DTD中聲明的符號。該節(jié)點的節(jié)點類型nodeType的值為12，節(jié)點名稱nodeName的值為符號名稱，nodeValue的值為null 

總結(jié)

在這12種DOM節(jié)點類型中，有一些適用于XML文檔，有一些是不常用的類型。而對于常用類型，后面會陸續(xù)進行詳細介紹，本文對這12種節(jié)點類型只做概述，希望本文對大家能有所幫助。