當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5中的dom中的各种节点的层次关系是怎样的

發(fā)布時間：2025/6/15 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5中的dom中的各种节点的层次关系是怎样的小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

html5中的dom中的各種節(jié)點的層次關(guān)系是怎樣的

一、總結(jié)

一句話總結(jié)：Node節(jié)點是所有節(jié)點的基類，所以都繼承它的方法

1、dom提供在js中動態(tài)修改html標(biāo)簽的作用

比如增加修改標(biāo)簽等，并且是在非html代碼（比如js）層面，而不是在view層面

2、弄清楚層次關(guān)系，就不用死記硬背了

那些屬性方法什么的，就是不用背代碼，這些東西是都可以理解的，很好理解的，弄懂層次關(guān)系

1、document文檔對象是window對象的孩子么？

解答：是的。

2、document是什么？

解答：文檔對象，代表了整個html文檔，也包含了那個文檔下面的所有內(nèi)容，從html標(biāo)簽到head和body標(biāo)簽，從網(wǎng)頁內(nèi)容到網(wǎng)頁樣式。

3、DOM中的element對象是什么？

解答：每一個標(biāo)簽都是element對象，html標(biāo)簽是root element對象，head標(biāo)簽、body標(biāo)簽，a標(biāo)簽、h1標(biāo)簽等都是element對象。就是標(biāo)簽即element，element就是標(biāo)簽。

4、DOM中的Text對象是什么？

解答：Text對象即文本對象。html中的文本都是Text對象。<h1>這里面的文本是Text對象</h1>。標(biāo)簽也就是element的innerHTML所對應(yīng)的就是Text對象

5、DOM中的Attribute對象是什么？

解答：Attribute對象即屬性對象，所以標(biāo)簽也就是element的屬性都是Attribute對象，例如<a href="#"></a>中的href就是屬性對象。

6、一個DOM中id和name的數(shù)量是多少？

解答：id有且僅有一個，name可以有無數(shù)個。

7、document.getElementByName('table')這句話錯在哪？

解答：取id才是element，因為document中id只有一個，取name的話，那就是elements，那么可以有無數(shù)個。

8、document.getElementById('table')中的element指的什么？

解答：element就是標(biāo)簽咯，標(biāo)簽就是element對象咯。

9、innerHTML中只有文本么？

解答：innerHTML中不僅可以包含文本，還可以包含標(biāo)簽。所以給元素添加孩子標(biāo)簽可以就講包含孩子標(biāo)簽的html代碼直接賦值給父標(biāo)簽的innerHTML。

10、HTML的DOM中一種有多少種類型，它們的基類是什么？

解答：一共定義了12種節(jié)點類型，而這些類型又都繼承自Node類型。比如HTML元素通過元素節(jié)點表示，注釋通過注釋節(jié)點表示，文檔類型通過文檔類型節(jié)點表示等。

11、Node是所有節(jié)點的基類型么？

解答：是的

12、Node節(jié)點中不僅包括元素節(jié)點，還包括文本節(jié)點點，這句話對么？

解答：對

13、Node節(jié)點的常用屬性是什么？

解答：hasChildNodes() ?如果包含子節(jié)點就返回true，比查詢childNodes的length來的簡單。

14、如何返回一個文檔節(jié)點document的引用？

解答：ownerDocument返回文檔節(jié)點的引用（在html里面也就是document對象）

15、cloneNode()方法是什么，怎么使用？

解答：cloneNode();復(fù)制節(jié)點，接受一個參數(shù) true或者false。如果true就是復(fù)制那個節(jié)點和它的子節(jié)點。如果是false，就是復(fù)制節(jié)點本身（復(fù)制出來的節(jié)點就會沒有任何子元素）。這個方法返回復(fù)制的節(jié)點，如果需要操作它，那么需要借助前面講的4個方法來把這個節(jié)點放入到html中去。

16、html中所有東西都是節(jié)點，這句話對么？

解答：應(yīng)該是對的

17、document的write()和writeln()的區(qū)別是什么？

解答：write和writeln，它們都是向頁面寫入東西，區(qū)別就是后者會多加入一個換行符。注意的是：在頁面加載的過程中，可以使用這兩個方法向頁面添加內(nèi)容。如果頁面已經(jīng)加載完了，再調(diào)用write，會重寫整個頁面。

18、如果頁面已經(jīng)加載完了，再調(diào)用write會發(fā)生什么？

解答：會重寫整個頁面

19、Text節(jié)點有子元素么？

解答：它沒有子元素（不過這個仔細(xì)想想也知道= =）

20、如何我們想訪問Text的節(jié)點的文本內(nèi)容，我們怎么訪問？（兩種方法）

解答：nodeValue或者data屬性

21、Comment、DocumentType和DocumentFragment，這三種節(jié)點分別是什么？

解答：Comment是注釋節(jié)點，DocumentType就是doctype節(jié)點，通過docment.doctype來訪問，DocumentFragment這個節(jié)點是一個文檔片段，偶爾會用到。

22、html文檔中插入大量html代碼，用什么快？

解答：插入大量的html代碼，用innerHTML是非常快的，建議使用

二、簡介

DOM是所有前端開發(fā)每天打交道的東西，但是隨著jQuery等庫的出現(xiàn)，大大簡化了DOM操作，導(dǎo)致大家慢慢的“遺忘”了它的本來面貌。不過，要想深入學(xué)習(xí)前端知識，對DOM的了解是不可或缺的，所以本文力圖系統(tǒng)的講解下DOM的相關(guān)知識，如有遺漏或錯誤，還請大家指出一起討論^ ^。

1、DOM是什么？

　　DOM（文檔對象模型）是針對HTML和XML文檔的一個API，通過DOM可以去改變文檔。

　　這個說法很官方，大家肯定還是不明白。

　　舉個例子：我們有一段HTML，那么如何訪問第二層第一個節(jié)點呢，如何把最后一個節(jié)點移動到第一個節(jié)點上面去呢？

　　DOM就是定義了如果做類似操作，那么應(yīng)該怎么做的標(biāo)準(zhǔn)。比如用getElementById來訪問節(jié)點，用insertBefore來插入節(jié)點。

　　當(dāng)瀏覽器載入HTML時，會生成相應(yīng)的DOM樹。

　　簡而言之，DOM可以理解為一個訪問或操作HTML各種標(biāo)簽的實現(xiàn)標(biāo)準(zhǔn)。

　　對于一個HTML來說，文檔節(jié)點Document（看不到的）是它的根節(jié)點，對應(yīng)的對象便是document對象（嚴(yán)格講是子類HTMLDocument對象，下面單獨介紹Document類型時會指出）。

　　換句話說存在一個文檔節(jié)點Document，然后它有子節(jié)點，比如通過document.getElementsByTagName("html")，得到類型為元素節(jié)點的Element html。

　　每一段HTML標(biāo)記都可以用相應(yīng)的節(jié)點表示，例如：

　　HTML元素通過元素節(jié)點表示，注釋通過注釋節(jié)點表示，文檔類型通過文檔類型節(jié)點表示等。

　　一共定義了12種節(jié)點類型，而這些類型又都繼承自Node類型。

　　所以我們首先講Node類型，因為這個類型的方法是所有節(jié)點都會繼承的。

2、Node類型（基類，所有節(jié)點都繼承了它的方法）

　　Node是所有節(jié)點的基類型，所有節(jié)點都繼承自它，所以所有節(jié)點都有一些共同的方法和屬性。

　　先講Node類型的屬性

　　首先是nodeType屬性，用來表明節(jié)點類型的，例如：

document.nodeType; // 返回 9 ，其中document對象為文檔節(jié)點Document的實例

　　這里面，9代表的就是DOCUMENT_NODE節(jié)點的意思，可以通過Node.DOCUMENT_NODE查看節(jié)點對應(yīng)的數(shù)字

document.nodeType === Node.DOCUMENT_NODE; // true

　　至于一共有哪些節(jié)點，每個節(jié)點對應(yīng)的數(shù)字又是多少，這個可以問谷歌就知道了。反正常用的就是元素節(jié)點Element(對應(yīng)數(shù)字為1)和文本節(jié)點Text(對應(yīng)數(shù)字為3)?

　　然后常用的還有nodeName和nodeValue

　　對于元素節(jié)點 nodeName就是標(biāo)簽名，nodeValue就是null

　　對于文本節(jié)點 nodeName為"#text"(chrome里面測試的),nodeValue就是實際的值

　　每個節(jié)點還有childNodes屬性，這是個十分重要的屬性，它保存了這個節(jié)點所有直接子元素

　　調(diào)用childNodes返回的是一個NodeList對象，它極其像數(shù)組，但是有一個最關(guān)鍵的地方，它是動態(tài)查詢的，也就是說每次調(diào)用它都會對DOM結(jié)構(gòu)查詢，所以對它的使用需要慎重，注意性能。

　　訪問childNodes可以使用數(shù)組下表或者item方法

　　然后各個節(jié)點還存在各種屬性讓它們可以相互訪問，下圖很好的總結(jié)了

　　比較有用的方法和屬性：

　　1、hasChildNodes()

　　如果包含子節(jié)點就返回true，比查詢childNodes的length來的簡單。

　　2、ownerDocument

　　返回文檔節(jié)點的引用（在html里面也就是document對象）

　　再介紹下Node類型常用的方法

　　appendChild()方法可以在節(jié)點的childNodes的末尾增加一個節(jié)點，值得注意的是如果這個節(jié)點是已經(jīng)存在在文檔中的，那么便會刪除原節(jié)點，感覺上就像是移動節(jié)點一樣。

　　insertBefore()方法接受兩個參數(shù)，一個是插入的節(jié)點，另外一個是參照的節(jié)點。如果第二個參數(shù)為null，則insertBefore和appendChild效果一樣。否則便會把節(jié)點插入到參照節(jié)點之前。這里要注意的是，如果第二個參數(shù)不為null，那么插入的節(jié)點不能是已經(jīng)存在的節(jié)點。

　　replaceChild()方法可以替換節(jié)點，接受兩個參數(shù)，需要插入的節(jié)點和需要替換的節(jié)點。返回被替換掉的節(jié)點。

　　removeChild()移除節(jié)點。這里有個常見需求，比如我有一個節(jié)點 #waste-node ，那么如何移除它呢？

var wasteNode = document.getElementById("waste-node"); wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父節(jié)點，再調(diào)用removeClild刪除自己

　　這里先暫停一下，不知道大家注意到?jīng)]有，以上的幾個方法都是操作某個節(jié)點的子節(jié)點，也就是說，操作前必須找到父節(jié)點（通過parentNode來找）

　　接下來說下復(fù)制節(jié)點的方法：

　　cloneNode();復(fù)制節(jié)點，接受一個參數(shù) true或者false。如果true就是復(fù)制那個節(jié)點和它的子節(jié)點。如果是false，就是復(fù)制節(jié)點本身（復(fù)制出來的節(jié)點就會沒有任何子元素）。這個方法返回復(fù)制的節(jié)點，如果需要操作它，那么需要借助前面講的4個方法來把這個節(jié)點放入到html中去。

　　至此，Node類型的常見屬性和方法都介紹完了。結(jié)合開頭講的，所有節(jié)點類型都繼承自Node類型，所以這些方法是所有節(jié)點都有的。

3、Document類型

　　最開始講DOM是什么的時候提到了Document類型。其實關(guān)于這個類型最重要的是它的一個子類HTMLDocument有一個實例對象document。而這個document對象是我們最常用的一個對象了。

　　document對象又掛載在window對象上，所以在瀏覽器就可以直接訪問document了。

　　老規(guī)矩，先講講document對象的屬性，等會講講它的方法。

　　document對象上的一些屬性

　　document.childNodes 繼承自上面講的Node類型，可以返回文檔的直接子節(jié)點（通常包括文檔聲明和html節(jié)點）

　　document.documentElement 可以直接拿到html節(jié)點的引用（等價于document.getElementsByTagName("html")[0]）。

　　document.body body節(jié)點的引用

　　document.title ?頁面的title，可以修改，會改變?yōu)g覽器標(biāo)簽上的名字

　　document.URL 頁面的url

　　document.referrer 取得referrer，也就是打開這個頁面的那個頁面的地址，做來源統(tǒng)計時候比較有用

　　document.domain 取得域名，可以設(shè)置，但是通常只能設(shè)置為不包含子域名的情況，在一些子域名跨域情況下有效。

　　接下來介紹兩個熟悉的方法

　　getElementById 和 getElementsByTagName

　　getElementById，傳入id，得到元素節(jié)點。里面的參數(shù)區(qū)分大小寫（IE8-不區(qū)分）。注意：如果有多個id相同的元素，則返回第一個。IE7-里面表單元素的name也會被當(dāng)做id來使用。

　　getElementsByTagName 根據(jù)標(biāo)簽取得元素，得到的是HTMLCollection類型。如果傳入的是 "*" ，則可以取得全部元素。

　　還有一個是只有HTMLDocument類型（也就是document對象）才有的方法 getElementsByName 顧名思義，根據(jù)name返回元素。

　　document對象還有一些集合，例如document.forms 可以返回所有的form表單。類型也是HTMLCollection。

　　說到HTMLCollection，就再說說它

　　HTMLCollection就是一個包含一個或多個元素的集合，和上面講的NodeList還挺像的。HTMLCollection這個類型有兩個方法，一個是通過下標(biāo)（或者.item()）得到具體元素，還有就是通過['name']（或者.namedItem()）獲得具體元素。

　　最后，關(guān)于document對象還有一套重要的方法，那便是

　　write() writeln() open() close()

　　open和close分別是打開和關(guān)閉網(wǎng)頁的輸出流，在頁面加載過程中，就相當(dāng)于open狀態(tài)。這兩個方法一般不會去用它。

　　然后重要的方法就是write和writeln，它們都是向頁面寫入東西，區(qū)別就是后者會多加入一個換行符。

　　注意的是：在頁面加載的過程中，可以使用這兩個方法向頁面添加內(nèi)容。如果頁面已經(jīng)加載完了，再調(diào)用write，會重寫整個頁面。

　　還有一點，如果要動態(tài)寫入腳本例如 <script>xxx</script>這樣的，那么要注意把</script>分開來拼裝下，否則會被誤以為是腳本結(jié)束的標(biāo)志，導(dǎo)致這個結(jié)束符匹配到上面一個開始符。可以這樣寫"<scr" + "ipt>";

4、Element類型

　　接下來講講最重要也是最常見的一個類型，Element類型。

　　我們?nèi)粘Ｋ僮鞯亩际荅lement類型（實質(zhì)是HTMLElement，這里為了方便理解，就簡單這么說），比如

document.getElementById("test")

　　返回的就是Element類型。我們?nèi)粘Ｋf的“DOM對象”，通常也就是指Element類型的對象。

　　然后說說這個類型的常見屬性：

　　首先最開始說的Node類型上的那些屬性方法它都有，這個就不再重復(fù)了，主要說說它自己獨有的。

　　首先是tagName，這個和繼承自Node類型的nodeName一樣。都是返回標(biāo)簽名，通常是大寫，結(jié)果取決于瀏覽器。所以在做比較

　　的時候最好是調(diào)用下類似toLowerCase()這種方法再做比較。

　　說說上面提到過的HTMLElement類型

　　HTMLElement類型繼承自Element類型，也是HTML元素的實際類型，我們在瀏覽器里用的元素都是這個類型。

　　這個類型都具有一些標(biāo)準(zhǔn)屬性，比如：

　　id 元素的唯一標(biāo)識

　　title 通常是鼠標(biāo)移上去時候會顯示的信息

　　className 類名

　　等等，這幾個屬性是可讀寫的，也就是說你改變他們會得到相應(yīng)的效果。

　　除了屬性外，還有幾個重要的方法

　　首先說說操作節(jié)點屬性的方法

　　getAttribute 、setAttribute 、removeAttribute這3個方法。

　　這些是操作屬性最常用的方法了，怎么用就不說了，很簡單，顧名思義。

　　還有一個attributes屬性，保存了元素的全部屬性。

　　這里停下來，出個問題，ele.className 和 ele.getAttribute("class")返回的結(jié)果是不是同一個東西？

　　解答這個問題，我要說一個重要知識點，一個元素的屬性結(jié)構(gòu)是這么來的，比如一個inpnt元素

　　那么這個元素的屬性被包含在 input.attributes里面，比如你在html元素上看到的class、id或者你自己定義的data-test這種屬性。

　　然后?getAttribute 、setAttribute 、removeAttribute這3個方法可以認(rèn)為是快捷的取attributes集合的方法。而直接input.id或者input.className都是直接掛在input下的屬性，和attributes是同級的。所以返回的東西也許看過去一樣，實際是不一樣的，不信你可以試試input.checked這input.getAttribute("checked")試試。

　　關(guān)于這個知識點，詳細(xì)的說可以再寫一篇文章，在我的博客?從is(":checked")說起?中有談到過，大家可以看看這篇文章和文章后的討論，便可以知道是怎么一回事。

　　總得來說，這3個方法通常用了處理自定義的屬性，而不是id、class等這種“公認(rèn)特性”。

　　接下來說說創(chuàng)建元素

　　document.createElement()可以創(chuàng)建一個元素，比如：

document.createElement("div");

　　一般之后可以為元素設(shè)置屬性，兩種方法，一種是直接node.property還可以node.setAttribute("propertyName","value")。等

　　但是做完這些之后，這個元素還是沒有在頁面中，所以你還得通過最上面講的類似appendChild這些方法把元素添加到頁面里面。

　　在IE中，還可以直接穿整個HTML字符串進(jìn)去，來創(chuàng)建元素，比如

document.createElement("<div>test</div>");

　　最后，元素節(jié)點也支持HTMLDocument類型的那些查找方法，比如getElementsByTagName。不過它只會找自己后代的節(jié)點。所以可以這么寫代碼

document.getElementById("test").getElementsByTagName("div"); // 找到id為test元素下的所有div節(jié)點

5、Text類型

　　這個類型很特殊，也是第三常見類型（第一第二分別就是Document和Element）。

　　這個節(jié)點簡單來說就是一段字符串。

　　有個很重要的特征就是，它沒有子元素（不過這個仔細(xì)想想也知道= =）

　　訪問text節(jié)點的文本內(nèi)容，可以通過nodeValue或者data屬性。

　　下面簡單說說它提供的一些方法

appendData(); // 在text末尾加內(nèi)容 deleteData(offset, count); // 從offset指定的位置開始刪除count個字符

　　還有insertDate、replaceData、splitText等方法，就不一一說了，用的機(jī)會很少，可以用的時候再查閱。

　　然后它還有一個lenght屬性，返回字符長度的。

　　這里說一個常見的坑。比如下面這個html結(jié)構(gòu)

　　這里，ul的第一個子節(jié)點（firstChild）是什么呢？第一眼看過去，肯定認(rèn)為是li了，但是實際上，你會發(fā)現(xiàn)不是li，而是一個文本節(jié)點！

　　這是因為瀏覽器認(rèn)為ul和第一個li之間有空白字符，所以就有文本節(jié)點了。

　　這里一個常見的問題就是遍歷ul的childNodes的時候，遍歷的元素一定要判斷下nodeType是不是等于1（等于1就代表是元素節(jié)點），這樣才能跳過這個坑。否則你也可以刪除所有的空格和換行符。

　　創(chuàng)建文本節(jié)點的方法是document.createTextNode

　　然后接下來和操作Element類型一樣，就是再插入到元素中，瀏覽器就可以看到了。

6、其他的一些類型 Comment、DocumentType和DocumentFragment

　　這些不常用的一句話帶過把

　　Comment是注釋節(jié)點

　　DocumentType就是doctype節(jié)點，通過docment.doctype來訪問

　　DocumentFragment這個節(jié)點是一個文檔片段，偶爾會用到。

　　比如一種常見的用法是，在一個ul中插入3個li。

　　如果你循環(huán)插入3次，那么瀏覽器就要渲染3次，對性能有蠻大的影響。

　　所以大家一般這么做

　　先

var fragment = document.createDocumentFragment();

　　然后循環(huán)把li，用appendChild插入到fragment里面

　　最后在一次把fragment插入到ul里面。這樣就會很快。

7、DOM擴(kuò)展

　　進(jìn)過上面講的這么多節(jié)點類型，想必大家對DOM節(jié)點已經(jīng)有了很深的了解，下面講一講DOM擴(kuò)展的一些東西。

　　瀏覽器為了方便開發(fā)者，擴(kuò)展了一些DOM功能。

　　因為是瀏覽器自己擴(kuò)展的，所以使用前兼容性問題一定要注意

　　判斷“標(biāo)準(zhǔn)模式”和“混雜模式”通過 document.compatMode和新的document.documentMode

　　上面不是說了一個文本節(jié)點作為第一子元素的坑嗎，所以瀏覽器又實現(xiàn)了一個children屬性，這個屬性只包含元素節(jié)點。

　　為了方便判斷A節(jié)點是不是B節(jié)點的子節(jié)點，引入了contains方法，比如?

B.contains(A); // true就代表是，false就代表不是

　　這個方法有兼容性問題，使用前可以谷歌解決方法。

　　針對訪問元素，又提供了4個方法innerText/innerHTML/outerTEXT/outerHTML。

　　通過這些方法，可以讀和寫元素。

　　其中，*TEXT是返回文本內(nèi)容?*HTML是返回html文本。

　　而outer*則是代表是否包含元素本身。

　　實際使用來看，在讀內(nèi)容的時候 inner*和outer*沒有區(qū)別。

　　在把內(nèi)容寫入元素的時候，就是是否包含元素本身的區(qū)別。

　　重要的是，這幾個方法有性能問題，比如在IE中，通過inner*刪除的節(jié)點，其綁定的事件依然在內(nèi)存中，就很容易消耗大量內(nèi)存。

　　還有一個技巧是，插入大量的html代碼，用innerHTML是非常快的，建議使用。

8、總結(jié)

　　首先感謝所有看到這里的朋友，哈哈，關(guān)于DOM的東西實在是太多了，不過這也算是最重要的一個前端知識點之一吧。

三、測試題-簡答題