JavaScript DOM 體系深度解析：HTMLDocument、XMLDocument 與 Document 的關係圖譜

初學 JavaScript 時，`document` 是最熟悉的全域物件；但當涉足 XML 處理、`createHTMLDocument` 等進階 API 時，`HTMLDocument`、`XMLDocument`、`Document` 及 `document` 之間的繼承與實例關係往往令人「捋不清」。本文為你梳理 DOM 核心體系的類別繼承鏈與實際應用場景。

DOM 規範的三層架構

W3C DOM 規範將 API 劃分為三個層級，理解這一點是釐清關係的鑰匙：

1. Core DOM (W3C DOM)：定義通用的節點操作 API（`Node`、`Document`、`Element` 等），適用於 **HTML 與 XML** 通用場景。
2. HTML DOM：在 Core DOM 基礎上擴充 HTML 專屬介面（`HTMLDocument`、`HTMLElement`、`HTMLCollection` 等），僅適用於 HTML 文件。
3. XML DOM：同理擴充 XML 專屬介面（`XMLDocument` 等），僅適用於 XML 文件。

類別繼承鏈與 `document` 的真實身份

// 簡化繼承關係
Document (Core DOM 核心介面)
  ├── HTMLDocument (HTML DOM 擴充)  ← 瀏覽器中 HTML 頁面的 document 實例類別
  └── XMLDocument  (XML DOM 擴充)  ← responseXML、createDocument() 返回的實例類別

• `Document`：Core DOM 定義的**介面（Interface）**，規範所有文件物件必須具備的屬性/方法（`getElementById`、`createElement` 等）。
• `HTMLDocument`：繼承 `Document`，新增 HTML 專屬屬性（`cookie`、`domain`、`forms`、`images` 等）與方法（`write`、`close`）。**瀏覽器載入的 HTML 頁面，其 `window.document` 就是 `HTMLDocument` 的實例。**
• `XMLDocument`：繼承 `Document`，用於 XML 文件（如 `XMLHttpRequest.responseXML`、`DOMParser.parseFromString()` 結果）。
• `document` (小寫)：`window` 下的**全域變數/屬性**，指向當前文件的**具體實例物件**（HTML 頁面下為 `HTMLDocument` 實例）。

常見困惑點解析

1. `document.implementation.createHTMLDocument(title)` 是什麼？

屬於 **DOMImplementation 介面** 的方法，用於**離屏建立一個全新的 HTML 文件物件**（`HTMLDocument` 實例），不關聯當前視窗。常用於模板渲染、Web Components Shadow DOM 初始化、或離屏解析 HTML 片段。MDN 文檔中歸類在 `DOMImplementation` 下，而非 `document` 直屬，故直接在 `document` 上查不到。

2. 為何 HTML 頁面用 `document.getElementById`，XML 也能用？

因為兩者皆繼承自 `Document` 介面，核心查詢 API（`getElementById`、`querySelector`、`createElement` 等）在 Core DOM 階段已定義，**多型** 使得同樣代碼能操作不同文件型別。

3. `window.HTMLDocument` vs `window.Document`？

前者是 HTML 文件的**建構函式/類別**（暴露在全域供 `instanceof` 判斷），後者是 Core DOM 介面的建構函式（部分瀏覽器未暴露）。

實戰判斷技巧

console.log(document instanceof HTMLDocument); // true (HTML 頁面)
console.log(document instanceof XMLDocument);  // false
console.log(document.constructor.name);        // "HTMLDocument"

const xmlDoc = new DOMParser().parseFromString("<root/>", "application/xml");
console.log(xmlDoc instanceof XMLDocument);    // true
console.log(xmlDoc instanceof HTMLDocument);   // false

總結

**Core DOM 定標準，HTML/XML DOM 做擴充，`document` 是具體實例。** 牢記這張圖譜，面對 `createHTMLDocument`、`responseXML`、跨文件節點導入（`importNode`/`adoptNode`）等進階場景時，就能精準判斷物件型別、選擇正確 API，不再「一下子全亂了」。