前面的話

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

?

總括

　　一般地，節(jié)點(diǎn)至少擁有nodeType、nodeName和nodeValue這三個(gè)基本屬性。節(jié)點(diǎn)類型不同，這三個(gè)屬性的值也不相同

nodeType

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

元素節(jié)點(diǎn) 　　Node.ELEMENT_NODE(1) 屬性節(jié)點(diǎn) 　　Node.ATTRIBUTE_NODE(2) 文本節(jié)點(diǎn) 　　Node.TEXT_NODE(3) CDATA節(jié)點(diǎn) Node.CDATA_SECTION_NODE(4) 實(shí)體引用名稱節(jié)點(diǎn) 　　 Node.ENTRY_REFERENCE_NODE(5) 實(shí)體名稱節(jié)點(diǎn) 　　Node.ENTITY_NODE(6) 處理指令節(jié)點(diǎn) 　　Node.PROCESSING_INSTRUCTION_NODE(7) 注釋節(jié)點(diǎn) 　 Node.COMMENT_NODE(8) 文檔節(jié)點(diǎn) 　 Node.DOCUMENT_NODE(9) 文檔類型節(jié)點(diǎn) 　　Node.DOCUMENT_TYPE_NODE(10) 文檔片段節(jié)點(diǎn) 　　Node.DOCUMENT_FRAGMENT_NODE(11) DTD聲明節(jié)點(diǎn) Node.NOTATION_NODE(12)

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

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

nodeName

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

nodeValue

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

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

?

元素節(jié)點(diǎn)

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

　　以body元素為例

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

?

特性節(jié)點(diǎn)

　　元素特性節(jié)點(diǎn)attribute對(duì)應(yīng)網(wǎng)頁中HTML標(biāo)簽的屬性，它只存在于元素的attributes屬性中，并不是DOM文檔樹的一部分。特性節(jié)點(diǎn)的節(jié)點(diǎn)類型nodeType值是2，節(jié)點(diǎn)名稱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>

?

文本節(jié)點(diǎn)

　　文本節(jié)點(diǎn)text代表網(wǎng)頁中的HTML標(biāo)簽內(nèi)容。文本節(jié)點(diǎn)的節(jié)點(diǎn)類型nodeType值是3，節(jié)點(diǎn)名稱nodeName值是'#text'，nodeValue值是標(biāo)簽內(nèi)容值

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

<div id="test">測(cè)試</div> <script> var txt = test.firstChild; //3 '#text' '測(cè)試' console.log(txt.nodeType,txt.nodeName,txt.nodeValue) console.log(Node.TEXT_NODE === 3);//true </script>

?

CDATA節(jié)點(diǎn)

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

<![CDATA[ ]]>

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

?

實(shí)體引用名稱節(jié)點(diǎn)

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

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

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

?

實(shí)體名稱節(jié)點(diǎn)

　　上面已經(jīng)詳細(xì)解釋過，就不再贅述

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

?

處理指令節(jié)點(diǎn)

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

?

注釋節(jié)點(diǎn)

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

　　現(xiàn)在，在id為myDiv的div元素中存在一個(gè)<!-- 我是注釋內(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>

?

文檔節(jié)點(diǎn)

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

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

?

文檔類型節(jié)點(diǎn)

　　文檔類型節(jié)點(diǎn)DocumentType包含著與文檔的doctype有關(guān)的所有信息。文檔類型節(jié)點(diǎn)的節(jié)點(diǎn)類型nodeType的值為10，節(jié)點(diǎn)名稱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" null console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue); console.log(Node.DOCUMENT_TYPE_NODE === 10); </script> </body> </html>

?

文檔片段節(jié)點(diǎn)

　　文檔片段節(jié)點(diǎn)DocumentFragment在文檔中沒有對(duì)應(yīng)的標(biāo)記，是一種輕量級(jí)的文檔，可以包含和控制節(jié)點(diǎn)，但不會(huì)像完整的文檔那樣占用額外的資源。該節(jié)點(diǎn)的節(jié)點(diǎn)類型nodeType的值為11，節(jié)點(diǎn)名稱nodeName的值為'#document-fragment'，nodeValue的值為null

<script> var nodeDocumentFragment = document.createDocumentFragment(); //11 "#document-fragment" null console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue); console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true </script>

?

DTD聲明節(jié)點(diǎn)

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

?

最后

　　在這12種DOM節(jié)點(diǎn)類型中，有一些適用于XML文檔，有一些是不常用的類型。而對(duì)于常用類型，后面會(huì)陸續(xù)進(jìn)行詳細(xì)介紹，本文對(duì)這12種節(jié)點(diǎn)類型只做概述

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/5785189.html

總結(jié)

以上是生活随笔為你收集整理的深入理解DOM节点类型第一篇——12种DOM节点类型概述的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。