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