第二節 DOM 元素樹 · EASYDOM

DOM 元素樹結構與 DOM 節點樹結構很相似，區別僅在于是利用節點解析 HTML 元素，還是利用元素解析 HTML 元素。 ## DOM 樹結構還記得下面這張圖嗎? ![](https://box.kancloud.cn/7b139570c987c5d40035e1c647fef81d_928x413.png) 上圖中的 HTML 頁面源代碼如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>示例頁面</title> </head> <body> <h2>這是一個示例頁面</h2> <p id="p" title="this is p.">這是一個段落內容.</p> </body> </html> ``` DOM 之所以可以訪問和更新 HTML 頁面中的內容、結構和樣式，是因為 DOM 將 HTML 頁面解析為一個 **樹結構**。 ## DOM 元素樹上述 HTML 頁面示例代碼，如果利用節點方式解析為 **DOM 節點樹結構** 的話，如下所示: ![](https://box.kancloud.cn/113bc69e67856a911a0b015db354febb_1314x587.png) 如果利用元素方式解析為 **DOM 元素樹結構** 的話，如下所示: ![](https://box.kancloud.cn/4381680019247e3014a15ae877116aaa_920x408.png) 通過上圖所示，我們發現 DOM 元素樹結構與 DOM 節點樹結構類似，同樣在元素之間存在著某些固定的關系。 ## 元素之間的關系在 DOM 元素樹結構中，主要具有以下三層關系。 ### 父級與子級如果我們將 HTML 頁面中某一個元素作為父級的話，那包含在該元素內的第一層所有元素都可以稱為該元素的子級。例如，我們來看一下下面這個 DOM 元素樹結構: ![](https://box.kancloud.cn/922a7606da85baa775e8cf061ef7800f_1209x493.png) 在上面的 DOM 節點樹結構中，`<html>` 元素作為父級，`<head>` 和 `<body>` 元素作為子級。 ### 祖先與后代如果我們將 HTML 頁面中某一個元素作為祖先的話，那包含在該元素內的所有元素（除子級之外的）都可以稱為該元素的后代。例如，我們來看一下下面這個 DOM 元素樹結構: ![](https://box.kancloud.cn/f36d10a59b0b59e8a1b4b9874cad1e62_1252x516.png) 在上面的 DOM 節點樹結構中，`<html>` 元素作為祖先，`<meta>`、`<title>`、`<h2>` 和 `<p>` 元素作為后代。 ### 兄弟關系具有相同父級元素的兩個或幾個元素之間就是兄弟關系。例如，我們來看一下下面這個 DOM 元素樹結構: ![](https://box.kancloud.cn/04501acb39eba03e46204d175f7b8b06_1236x508.png) 在上面的 DOM 元素樹結構中，`<meta>` 和 `<title>` 元素就是兄弟關系。因為它們具有相同的父級元素 `<head>`。 ## 節點與元素的區別利用節點解析 DOM 節點樹結構時，我們會發現元素節點、屬性節點和文本節點是獨立存在的。如果獲取文本節點的話，文本節點是元素節點的子節點。所以，我們可以通過子節點方式得到指定的文本節點。如果獲取屬性節點的話，由于屬性節點不是元素節點的子節點。所以，并不能直接通過獲取子節點的方式得到指定的屬性節點。而利用元素解析 DOM 元素樹結構時，我們會發現元素、屬性和文本是從屬關系。什么意思呢? 我們可以簡單地將屬性和文本內容理解為是元素的一部分。這樣，我們獲取屬性或文本內容時，就可以通過元素的獲取屬性或獲取文本內容的方法或屬性來實現。關于節點與元素的區別，我們可以通過以下示例代碼來理解: ```javascript // 節點方式獲取屬性節點 var btn = document.getElementById('btn'); var attrNode = btn.getAttributeNode('class'); var attrValue = attrNode.nodeValue; // 元素方式獲取屬性 var btn = document.getElementById('btn'); var attrValue = btn.getAttribute('class'); ```