9.2 DOM的基礎
9.2.1 標籤、元素、節點
在對 HTML 以及 DOM 進行討論時，我們常常會混用標籤、元素、節點等術語。故在此再次對它們的定義進行確認。
標籤
標籤是一種用於標記的字串，其作用為對文件的結構進行指定。通常都會有起始標籤與結束標籤。在結束標籤中，有一些可以被省略，如
<p>標籤。同時也有一些標籤不存在結束標籤，例如<input>標籤（程式碼清單 9.1）。說到底標籤只是用於書寫場合，在談論 DOM 的話題時幾乎不會使用。
程式碼清單 9.1 標籤
<div> <!-- div的起始標籤 --> <p> <!-- p的結束標籤可以省略 --> <input type="button"> <!-- input只有起始標籤而沒有結束標籤 --> </div> <!-- div的結束標籤 -->
元素、節點
比較容易產生混淆的是元素和節點的概念。元素和節點之間略有一些繼承關係，其中節點是父類概念。節點具有 nodeType 這一屬性，如果其值為 ELEMENT_NODE(1)，該節點則是一個元素。
表 9.5 總結了 HTML 文件常用的節點。
表 9.5 在 HTML 文件中使用的節點
| 節點 | 節點型別常量 | 節點型別的值 | 介面 |
|---|---|---|---|
| 元素節點 | ELEMENT_NODE | 1 | Element |
| 屬性節點 | ATTRIBUTE_NODE | 2 | Attr |
| 文字節點 | TEXT_NODE | 3 | Text |
| 註釋節點 | COMMENT_NODE | 8 | Comment |
| 文件節點 | DOCUMENT_NODE | 9 | Document |
9.2.2 DOM 操作
JavaScript 的作用是使網頁能夠執行某些功能。為了實現這些功能，必須對 DOM 進行操作。通過選擇某個 DOM 元素並改寫其屬性，或建立一個新的 DOM 元素，就能夠給予使用者視覺反饋，以實現互動功能。之後，將從選擇、建立、更改 與 刪除 四個方面對 DOM 的相關操作進行說明。
9.2.3 Document 物件
Document 物件是 DOM 樹結構中的根節點。雖然這是一個根節點，在 HTML 文件中卻不用書寫其對應的標籤。例如，雖然
<html>標籤與<body>標籤分別對應 Document 物件中的 documentElement 屬性與 body 屬性，但卻沒有與Document 物件自身相對應的標籤。這是因為 Document 物件是一種用於表示整個 HTML 文件的物件。
可以通過 JavaScript 中的 document 這一全域性變數來訪問 Document 物件。準確地說，document 是 window 物件中的一個屬性。不過，由於 window 物件是一個全域性物件，因此在對其屬性進行訪問時可以將 window. 省略不寫。
實際上，在通過 JavaScript 表示 HTML 文件時，所有的全域性變數都是 window 物件的屬性。可以通過下面的程式碼對此進行確認。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測試</title>
</head>
<body>
<script>
var hzh = '黃子涵';
alert(window.hzh === '黃子涵');
</script>
</body>
</html>
順便提一下，window 物件並沒有包含於 DOM 樹結構之中。如前面所講，Document 物件在 DOM 樹結構中是根節點，因此也無法通過下面將要介紹的方法來取得 Document 物件的父節點。