JavaScript DOM 核心概念深度解析：Node 接口與節點類型實現關係

原文困惑

《JavaScript 高級程序設計》提到：「DOM1 級定義了一個 Node 接口，該接口將由 DOM 中的所有節點類型實現。這個 Node 接口在 JavaScript 中是作為 Node 類型實現的。」初學者難以理解「接口」「實現」「類型」三者關係。

核心概念釐清

1. 一切皆節點：DOM 文檔樹中——文檔、元素、屬性、文本、註釋、DocumentFragment 等——均為節點。
2. Node 接口（規範層）：W3C 定義的抽象契約，規定所有節點必須擁有的屬性（nodeType、nodeName、nodeValue、parentNode、childNodes 等）與方法（appendChild、removeChild、cloneNode 等）。
3. Node 類型（JS 實現層）：瀏覽器將 Node 接口具體化為 JavaScript 內建構造函數 Node，所有具體節點類（Element、Text、Attr、Comment 等）繼承自 Node，形成原型鏈：
   Element.prototype → Node.prototype → Object.prototype

實戰理解：查找並修改節點

// 1. 獲取元素節點（Element 繼承自 Node）
const div = document.getElementById('app');  // 返回 Element 實例

// 2. 利用 Node 接口屬性/方法遍歷/操作
console.log(div.nodeType);        // 1 (Node.ELEMENT_NODE)
console.log(div.nodeName);        // "DIV"
console.log(div.childNodes);      // NodeList，包含文本節點、元素節點等

// 3. 創建並插入新節點
const span = document.createElement('span'); // Element 實例
span.textContent = 'Hello';      // 設置文本節點內容
div.appendChild(span);           // Node 方法

關鍵區別

• 接口：規範「能做什麼」（W3C 文檔）
• 類型/構造函數：JS 引擎「如何實現」（瀏覽器內部 C++ 代碼暴露的 JS 對象）
• 實例：運行時具體的節點對象

理解「Node 接口定義統一行為，具體節點類型繼承實現差異化特性」，即可靈活操作 DOM 樹，不再迷失於術語中。