??????? 在JavaScript中，document這個(gè)對(duì)象大家一定很熟悉，哪怕是剛剛開始學(xué)習(xí)的新人，也會(huì)很快接觸到這個(gè)對(duì)象。而document對(duì)象不僅僅是一個(gè)普通的JavaScript內(nèi)置對(duì)象，它還是一個(gè)巨大API的核心對(duì)象，這個(gè)巨大的API就是DOM（Document Object Model），它將文檔的內(nèi)容呈現(xiàn)在JS面前，并賦予了JS操作文檔的能力。

??????????????????????????????????????????

??????? 在這里不得不提的概念則是DOM樹，DOM樹體現(xiàn)著HTML頁(yè)面的層級(jí)結(jié)構(gòu)，學(xué)習(xí)中經(jīng)常提到的父元素子元素的說法也是建立在樹這種數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ)之上的。而DOM樹有DOM文檔樹和DOM元素樹兩種，上圖就是一顆DOM元素樹，它只包含元素節(jié)點(diǎn)，而DOM文檔樹則包含文檔中所有內(nèi)容。

????? 一顆DOM元素樹

一篇HTML文檔及其DOM文檔樹。

??????? HTML頁(yè)面中的所有內(nèi)容都會(huì)體現(xiàn)在DOM文檔樹中，要理解這種結(jié)構(gòu)，對(duì)構(gòu)成它的每個(gè)節(jié)點(diǎn)就要先有了解。下面是DOM節(jié)點(diǎn)的基本類別，以及各自類別基本屬性的值及簡(jiǎn)單介紹：

節(jié)點(diǎn)類型nodeTypenodeNamenodeValue

元素節(jié)點(diǎn)	1	標(biāo)簽名（大寫）	null
屬性節(jié)點(diǎn)	2	屬性名	屬性值
文本節(jié)點(diǎn)	3	#text	文本內(nèi)容
CDTAT節(jié)點(diǎn)	4	#cdata-section	CDATA區(qū)域的內(nèi)容
實(shí)體引用名稱節(jié)點(diǎn)	5	引用名稱	null
實(shí)體名稱節(jié)點(diǎn)	6	實(shí)體名稱	null
處理指令節(jié)點(diǎn)	7	target	entire content cluding the target
注釋節(jié)點(diǎn)	8	#comment	注釋內(nèi)容
文檔節(jié)點(diǎn)	9	#document	null
文檔類型節(jié)點(diǎn)	10	doctype的名稱	null
文檔片段節(jié)點(diǎn)	11	#document-fragment	null
DTD聲明節(jié)點(diǎn)	12	符號(hào)名稱	null

?????????????????????????????????????????????????????????????????????????????? 注：1、在以上的節(jié)點(diǎn)分類中，nodeType為4、5、6、7、12的四種節(jié)點(diǎn)，是針對(duì)XML文檔而言的，在HTML中并未出現(xiàn)，在這里就不詳細(xì)介紹了。

??????????????????????????????????????????????????????????????????????????????????????????????????? 2、在以下演示中，默認(rèn)已經(jīng)定義了此方法：

?????????????????????????? ? ? ? ? ? ? ? ?? ??

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

??????? 每一個(gè)HTML標(biāo)簽都是一個(gè)元素節(jié)點(diǎn)：

??????? ? 運(yùn)行及結(jié)果：?

二、屬性節(jié)點(diǎn)

??????? 元素的屬性在DOM中以屬性節(jié)點(diǎn)來表示。

??????? 運(yùn)行及結(jié)果：

????????? 這里需要特殊說明下，一般獲取屬性節(jié)點(diǎn)都會(huì)直接想到使用DOM中的getAttribute（）方法或者直接根據(jù)屬性名用‘.’去訪問，然而在操作過程中，JavaScript會(huì)直接將獲得的值轉(zhuǎn)換成字符串，而不是以屬性節(jié)點(diǎn)的方式呈現(xiàn)，就無法訪問它的nodeType等屬性了，如下：

?????????

??????? 關(guān)于屬性節(jié)點(diǎn)，還有一個(gè)重點(diǎn)：屬性節(jié)點(diǎn)不是HTML DOM樹中的一部分 如下：

??????? ? 沒有辦法通過DOM遍歷方法獲取屬性節(jié)點(diǎn)，只能通過attributes屬性、getAttributes（）方法以及‘.’來訪問屬性節(jié)點(diǎn)。

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

??????? 直觀理解，文本節(jié)點(diǎn)即是指向文本的節(jié)點(diǎn)~

??????? 運(yùn)行及結(jié)果：

??????? 以上三種節(jié)點(diǎn)是在日常使用中最常見的三種節(jié)點(diǎn)了，另外幾種節(jié)點(diǎn)使用并不多：

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

??????? 別以為代碼注釋是只能在開發(fā)環(huán)境中看到的~在瀏覽器內(nèi)HTML文檔中，同樣包含著注釋節(jié)點(diǎn)，我們可以對(duì)其進(jìn)行各種DOM操作，只不過注釋節(jié)點(diǎn)不會(huì)渲染在頁(yè)面中而已。

??????? 運(yùn)行及結(jié)果：

五、文檔節(jié)點(diǎn)：

???????? 文檔節(jié)點(diǎn)表示整個(gè)文檔，也是DOM文檔樹的根節(jié)點(diǎn)。

???????

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

???????

??????? 運(yùn)行及結(jié)果：

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

??????? 文檔片段節(jié)點(diǎn)是我在寫本篇博客的時(shí)候還幾乎一無所知的一種節(jié)點(diǎn)，在這里學(xué)習(xí)了這篇博客：深入理解DOM節(jié)點(diǎn)類型第四篇——文檔片段節(jié)點(diǎn)DocumentFragment

??????? 以下是現(xiàn)學(xué)現(xiàn)賣：

??????????????? DocumentFragment，文檔片段節(jié)點(diǎn)，是唯一在HTML文檔中沒有對(duì)應(yīng)標(biāo)記的節(jié)點(diǎn)，也就是說它不會(huì)在我們編寫HTML代碼的時(shí)候出現(xiàn)在我們的視野中。文檔片段是一種輕量級(jí)的文檔，可以包含很多DOM節(jié)點(diǎn)。在前端操作中，常常需要對(duì)文檔樹中的DOM節(jié)點(diǎn)做各種各樣的操作，這個(gè)時(shí)候，對(duì)應(yīng)的操作就會(huì)造成頁(yè)面重繪。如果DOM操作非常多的話，就會(huì)不斷地進(jìn)行頁(yè)面重繪，帶來沉重的瀏覽器負(fù)擔(dān)，拖慢運(yùn)行速度。

??????????????? 如果將節(jié)點(diǎn)加入文檔片段之中，這些節(jié)點(diǎn)就會(huì)脫離文檔樹，這個(gè)時(shí)候進(jìn)行DOM操作的話就不會(huì)造成頁(yè)面重繪。等大量DOM操作都執(zhí)行完成之后，再將文檔片段添加到頁(yè)面中，這時(shí)完成操作的節(jié)點(diǎn)會(huì)一次性渲染完畢，避免了多次渲染帶來的性能拖慢。

??????????????? 要使用文檔片段，JavaScript提供了document.createDocumentFragment()方法。關(guān)于文檔片段的具體使用和性能提升，會(huì)在另外的博文中另行研究，這里看一下文檔片段節(jié)點(diǎn)的信息：

???????

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

??????? DTD為Document Type Definition，為文檔類型定義。實(shí)際上DTD節(jié)點(diǎn)也是主要針對(duì)XML文檔而言的，在HTML中也不直接含有DTD聲明節(jié)點(diǎn)，只有包含著DTD聲明的文檔類型節(jié)點(diǎn)（10）。

??????? 我們都知道HTML有HTML4.01，XHTML等等，每種版本的標(biāo)記語言中還有三種細(xì)分的定義：Strict（嚴(yán)格）、Transitional（過渡）、Frameset（框架集）。如果沒寫DTD，瀏覽器就不知道正在處理的文檔是用哪種標(biāo)記語言來寫的，就造成了解析結(jié)果的不同，最常見的錯(cuò)誤就是用XHTML較為嚴(yán)格的規(guī)范來解析以HTML這種寬松標(biāo)準(zhǔn)所構(gòu)建的文本，自然會(huì)出現(xiàn)很多問題。w3c給出的解釋是：由于HTML4.01基于SGML，DTD規(guī)定了標(biāo)記語言的規(guī)則，故需要在HTML聲明中引用DTD。在如今的HTML5時(shí)代，由于HTML5不基于SGML，故我們也不再需要在文檔聲明中包含DTD信息，使用<!DOCTYPE HTML>即可。

???????

??????? 以上就是HTML DOM節(jié)點(diǎn)的分類以及簡(jiǎn)單介紹了，關(guān)于節(jié)點(diǎn)的各種屬性以及方法請(qǐng)點(diǎn)擊：

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

總結(jié)

以上是生活随笔為你收集整理的简述HTML DOM及其节点分类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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