摘要:元素之間的關(guān)系在元素樹(shù)結(jié)構(gòu)中,主要具有以下三層關(guān)系。祖先與后代如果我們將頁(yè)面中某一個(gè)元素作為祖先的話(huà),那包含在該元素內(nèi)的所有元素除子級(jí)之外的都可以稱(chēng)為該元素的后代。兄弟關(guān)系具有相同父級(jí)元素的兩個(gè)或幾個(gè)元素之間就是兄弟關(guān)系。
DOM 元素樹(shù)結(jié)構(gòu)與 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)很相似,區(qū)別僅在于是利用節(jié)點(diǎn)解析 HTML 元素,還是利用元素解析 HTML 元素。
DOM 樹(shù)結(jié)構(gòu)還記得下面這張圖嗎?
上圖中的 HTML 頁(yè)面源代碼如下:
示例頁(yè)面 這是一個(gè)示例頁(yè)面
這是一個(gè)段落內(nèi)容.
DOM 之所以可以訪問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容、結(jié)構(gòu)和樣式,是因?yàn)?DOM 將 HTML 頁(yè)面解析為一個(gè) 樹(shù)結(jié)構(gòu)。
DOM 元素樹(shù)上述 HTML 頁(yè)面示例代碼,如果利用節(jié)點(diǎn)方式解析為 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu) 的話(huà),如下所示:
如果利用元素方式解析為 DOM 元素樹(shù)結(jié)構(gòu) 的話(huà),如下所示:
通過(guò)上圖所示,我們發(fā)現(xiàn) DOM 元素樹(shù)結(jié)構(gòu)與 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)類(lèi)似,同樣在元素之間存在著某些固定的關(guān)系。
元素之間的關(guān)系在 DOM 元素樹(shù)結(jié)構(gòu)中,主要具有以下三層關(guān)系。
父級(jí)與子級(jí)如果我們將 HTML 頁(yè)面中某一個(gè)元素作為父級(jí)的話(huà),那包含在該元素內(nèi)的第一層所有元素都可以稱(chēng)為該元素的子級(jí)。
例如,我們來(lái)看一下下面這個(gè) DOM 元素樹(shù)結(jié)構(gòu):
在上面的 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中, 元素作為父級(jí), 和 元素作為子級(jí)。
祖先與后代如果我們將 HTML 頁(yè)面中某一個(gè)元素作為祖先的話(huà),那包含在該元素內(nèi)的所有元素(除子級(jí)之外的)都可以稱(chēng)為該元素的后代。
例如,我們來(lái)看一下下面這個(gè) DOM 元素樹(shù)結(jié)構(gòu):
在上面的 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中, 元素作為祖先,、
元素作為后代。
兄弟關(guān)系具有相同父級(jí)元素的兩個(gè)或幾個(gè)元素之間就是兄弟關(guān)系。例如,我們來(lái)看一下下面這個(gè) DOM 元素樹(shù)結(jié)構(gòu):
在上面的 DOM 元素樹(shù)結(jié)構(gòu)中, 和
利用節(jié)點(diǎn)解析 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)時(shí),我們會(huì)發(fā)現(xiàn)元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)是獨(dú)立存在的。
如果獲取文本節(jié)點(diǎn)的話(huà),文本節(jié)點(diǎn)是元素節(jié)點(diǎn)的子節(jié)點(diǎn)。所以,我們可以通過(guò)子節(jié)點(diǎn)方式得到指定的文本節(jié)點(diǎn)。
如果獲取屬性節(jié)點(diǎn)的話(huà),由于屬性節(jié)點(diǎn)不是元素節(jié)點(diǎn)的子節(jié)點(diǎn)。所以,并不能直接通過(guò)獲取子節(jié)點(diǎn)的方式得到指定的屬性節(jié)點(diǎn)。
而利用元素解析 DOM 元素樹(shù)結(jié)構(gòu)時(shí),我們會(huì)發(fā)現(xiàn)元素、屬性和文本是從屬關(guān)系。什么意思呢? 我們可以簡(jiǎn)單地將屬性和文本內(nèi)容理解為是元素的一部分。
這樣,我們獲取屬性或文本內(nèi)容時(shí),就可以通過(guò)元素的獲取屬性或獲取文本內(nèi)容的方法或?qū)傩詠?lái)實(shí)現(xiàn)。
關(guān)于節(jié)點(diǎn)與元素的區(qū)別,我們可以通過(guò)以下示例代碼來(lái)理解:
// 節(jié)點(diǎn)方式獲取屬性節(jié)點(diǎn) var btn = document.getElementById("btn"); var attrNode = btn.getAttributeNode("class"); var attrValue = attrNode.nodeValue; // 元素方式獲取屬性 var btn = document.getElementById("btn"); var attrValue = btn.getAttribute("class");
本教程免費(fèi)開(kāi)源,任何人都可以免費(fèi)學(xué)習(xí)、分享,甚至可以進(jìn)行修改。但需要注明作者及來(lái)源,并且不能用于商業(yè)。
本教程采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/87331.html
摘要:簡(jiǎn)單來(lái)說(shuō),節(jié)點(diǎn)作為樹(shù)結(jié)構(gòu)中的連接點(diǎn),最終構(gòu)成了完整的樹(shù)結(jié)構(gòu)。節(jié)點(diǎn)樹(shù)結(jié)構(gòu)通過(guò)節(jié)點(diǎn)概念,我們可以將原本的樹(shù)結(jié)構(gòu)改成節(jié)點(diǎn)樹(shù)結(jié)構(gòu)進(jìn)行表示。節(jié)點(diǎn)之間的關(guān)系中的表示模型,也可以用來(lái)表示節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)之間的關(guān)系。值得注意的是和元素并不是兄弟關(guān)系。 DOM 樹(shù)結(jié)構(gòu) DOM 之所以可以訪問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容、結(jié)構(gòu)和樣式,是因?yàn)?DOM 將 HTML 頁(yè)面解析為一個(gè) 樹(shù)結(jié)構(gòu)。 例如下面這段代...
摘要:而標(biāo)準(zhǔn)規(guī)范中提供了對(duì)象,主要是依靠元素樹(shù)結(jié)構(gòu)訪問(wèn)和更新頁(yè)面的內(nèi)容。值得注意的是所有的頁(yè)面的元素都是對(duì)象,而這個(gè)對(duì)象又是繼承于對(duì)象的。我們可以簡(jiǎn)單地理解對(duì)象是對(duì)象的補(bǔ)充。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國(guó)際許可協(xié)議進(jìn)行許可。 DOM 的標(biāo)準(zhǔn)規(guī)范中提供了 Element 對(duì)象,該對(duì)象提供了 HTML 頁(yè)面中所有元素所具有的屬性和方法。 我們都知道 DOM 標(biāo)準(zhǔn)規(guī)范中提供了 Nod...
摘要:系列教程是一套免費(fèi)開(kāi)源,任何人都可以免費(fèi)學(xué)習(xí)分享,甚至可以進(jìn)行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開(kāi)始,我們先來(lái)了解是什么的作用,以及瀏覽器的支持是怎么樣的。 《EASYDOM》系列教程是一套免費(fèi)、開(kāi)源,任何人都可以免費(fèi)學(xué)習(xí)、分享,甚至可以進(jìn)行修改。但需要注明作者及來(lái)源,并且不能用于商業(yè)。 本文是這套系列教程的索引(也就是目錄): 第一回 DOM 介紹 在最開(kāi)始,我...
摘要:對(duì)象提供了一系列的屬性和方法用來(lái)利用節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)的關(guān)系實(shí)現(xiàn)遍歷其中的節(jié)點(diǎn)。在上述語(yǔ)法結(jié)構(gòu)中,屬性返回指定節(jié)點(diǎn)的父元素節(jié)點(diǎn)。該屬性獲取一個(gè)包含指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)的集合。值得注意的是及之前版本的瀏覽器中不存在空白節(jié)點(diǎn)問(wèn)題。 Node 對(duì)象提供了一系列的屬性和方法用來(lái)利用 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)的關(guān)系實(shí)現(xiàn)遍歷其中的節(jié)點(diǎn)。 關(guān)于節(jié)點(diǎn)之間的關(guān)系,可以參考《DOM樹(shù)結(jié)構(gòu)》一節(jié)有關(guān)節(jié)點(diǎn)之間關(guān)...
摘要:對(duì)象的作用樹(shù)結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析,稱(chēng)為節(jié)點(diǎn)樹(shù)結(jié)構(gòu)。對(duì)象的繼承鏈關(guān)系對(duì)象是繼承于對(duì)象的,是一個(gè)用于接收事件的對(duì)象。但需要注明作者及來(lái)源,并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國(guó)際許可協(xié)議進(jìn)行許可。 DOM 的標(biāo)準(zhǔn)規(guī)范中提供了 Node 對(duì)象,該對(duì)象主要提供了用于解析 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)的屬性和方法。 Node 對(duì)象的作用 DOM 樹(shù)結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析,...
閱讀 3280·2023-04-25 17:19
閱讀 653·2021-11-23 09:51
閱讀 1376·2021-11-08 13:19
閱讀 810·2021-09-29 09:34
閱讀 1717·2021-09-28 09:36
閱讀 1522·2021-09-22 14:59
閱讀 2739·2019-08-29 16:38
閱讀 2083·2019-08-26 13:40