DOM學習歷程-2
阿新 • • 發佈：2021-07-27
在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
- 整個文件是一個文件節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文字是文字節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
節點父、子和同胞
節點樹中的節點彼此擁有層級關係。
父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱為根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子節點
- 同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關係：
<html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html>
從上面的HTML片段可以看出：
- <html> 節點沒有父節點；它是根節點
- <head> 和 <body> 的父節點是 <html> 節點
- 文字節點 "Hello world!" 的父節點是 <p> 節點
並且：
- <html> 節點擁有兩個子節點：<head> 和 <body>
- <head> 節點擁有一個子節點：<title> 節點
- <title> 節點也擁有一個子節點：文字節點 "DOM 教程"
- <h1> 和 <p> 節點是同胞節點，同時也是 <body> 的子節點
並且：
- <head> 元素是 <html> 元素的首個子節點
- <body> 元素是 <html> 元素的最後一個子節點
- <h1> 元素是 <body> 元素的首個子節點
- <p> 元素是 <body> 元素的最後一個子節點
getElementById() 方法返回帶有指定 ID 的元素：
比如
var element=document.getElementById("intro");
HTML DOM 物件 - 方法和屬性
一些常用的 HTML DOM 方法：
getElementById(id) - 獲取帶有指定 id 的節點（元素）
appendChild(node) - 插入新的子節點（元素）
removeChild(node) - 刪除子節點（元素）
一些常用的 HTML DOM 屬性：
innerHTML - 節點（元素）的文字值
parentNode - 節點（元素）的父節點
childNodes - 節點（元素）的子節點
attributes - 節點（元素）的屬性節點
這裡提供一些您將在本教程中學到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回帶有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點陣列）。 |
| getElementsByClassName() | 返回包含帶有指定類名的所有元素的節點列表。 |
| appendChild() | 把新的子節點新增到指定節點。 |
| removeChild() | 刪除子節點。 |
| replaceChild() | 替換子節點。 |
| insertBefore() | 在指定的子節點前面插入新的子節點。 |
| createAttribute() | 建立屬性節點。 |
| createElement() | 建立元素節點。 |
| createTextNode() | 建立文字節點。 |
| getAttribute() | 返回指定的屬性值。 |
| setAttribute() | 把指定屬性設定或修改為指定的值。 |
nodeName 屬性規定節點的名稱。
- nodeName 是隻讀的
- 元素節點的 nodeName 與標籤名相同
- 屬性節點的 nodeName 與屬性名相同
- 文字節點的 nodeName 始終是 #text
- 文件節點的 nodeName 始終是 #document
注意事項：nodeName 始終包含 HTML 元素的大寫字母標籤名。
nodeValue 屬性規定節點的值。
- 元素節點的 nodeValue 是 undefined 或 null
- 文字節點的 nodeValue 是文字本身
- 屬性節點的 nodeValue 是屬性值
nodeType 屬性
nodeType 屬性返回節點的型別，nodeType 是隻讀的。
下表是比較重要的節點型別：
| 元素型別 | NodeType |
|---|---|
| 元素 | 1 |
| 屬性 | 2 |
| 文字 | 3 |
| 註釋 | 8 |
| 文件 | 9 |