深入掌握 HTML DOM 樹操作：節點關係、遍歷技巧與實戰範例

DOM (Document Object Model) 是瀏覽器端程式設計的核心 API。本文從樹狀結構基本概念出發，解析節點關係、原生遍歷方法、現代便捷 API 並提供完整實戰範例。

一、DOM 樹基本結構

根節點：document (文檔根)

四大節點關係：

• 父節點：parentNode
• 子節點集合：childNodes (含文字節點、註解節點)
• 兄弟節點：previousSibling / nextSibling
• 首/尾子節點：firstChild / lastChild

範例 HTML 結構

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <div>Tutorial of DHTML & JavaScript</div>
  </body>
</html>

對應 DOM 樹

html
├─ head
│   └─ title
│       └─ #text "My Website"
└─ body
    └─ div
        └─ #text "Tutorial of DHTML & JavaScript"

二、傳統遍歷方式 (教學示範用)

function changeDivText(newText) {
    var root = document;                    // 根節點
    var html = root.childNodes[0];          // html 元素
    var body = html.childNodes[1];          // body 元素 (childNodes[0] 為 head)
    var div = body.childNodes[0];           // div 元素
    var textNode = div.childNodes[0];       // 文字節點
    textNode.data = newText;                // 修改文字內容
}

缺點：極度脆弱，HTML 結構微調 (換行、註解、新增元素) 即導致索引錯位。

三、現代標準 API (生產環境必用)

1. 元素選取 (推薦)

方法	回傳	備註
document.getElementById(id)	Element	唯一 ID，最快
document.getElementsByTagName(name)	HTMLCollection (即時)	標籤名
document.getElementsByClassName(class)	HTMLCollection (即時)	類別名
document.querySelector(selector)	Element	CSS 選擇器，單一結果
document.querySelectorAll(selector)	NodeList (靜態)	CSS 選擇器，多結果

2. 現代遍歷屬性 (僅元素節點，忽略文字/註解)

屬性	說明
parentElement	父元素節點
children	子元素集合 (HTMLCollection)
firstElementChild / lastElementChild	首/尾子元素
previousElementSibling / nextElementSibling	鄰近兄弟元素

3. 節點操作方法

// 建立元素
var el = document.createElement('div');
el.textContent = 'Hello';  // 安全設定文字 (不解析 HTML)
el.className = 'greeting';

// 插入
parent.appendChild(el);           // 末尾
parent.insertBefore(el, ref);     // ref 之前
parent.replaceChild(el, old);     // 替換
parent.removeChild(el);           // 移除

// 複製
var clone = el.cloneNode(true);   // true=深度複製子樹

四、完整實戰範例：動態修改 DIV 文字

<!DOCTYPE html>
<html>
<head>
  <title>DOM Demo</title>
  <script>
    function changeDivText() {
      // 現代寫法：直接選取
      var div = document.querySelector('body > div');
      if (div) {
        // 修改第一個文字節點，或直接用 textContent
        div.textContent = '內容已更新！' + new Date().toLocaleTimeString();
      }
    }
  </script>
</head>
<body>
  <div>原始教學內容</div>
  <button onclick="changeDivText()">更新文字</button>
</body>
</html>

五、跨域限制與影子 DOM 提醒

• 同源策略：無法跨域操作 `