JavaScript DOM 疑惑：為何 new Image() 合法但 new Button() 報錯？

在 MDN 文件中，HTMLButtonElement、HTMLFormElement 等均屬於「HTML DOM Element Objects」，但為何 new Image() 可正常建立，new Button()、new Form() 卻拋出 ReferenceError: Button is not defined？

核心差異：Image 是特例，非標準元素建構子

Image() 建構子存在於 window.Image，歷史緣由是為了 預載圖片（preload）與 canvas 繪圖服務，不等同於建立 DOM 節點。它回傳的是一個獨立的 HTMLImageElement 實例，未掛載到文件樹，也無 parentNode。

標準元素建構子：Custom Elements 規範

現代瀏覽器支援 document.createElement('button') 或 new HTMLButtonElement()（實驗性），但 絕大多數 HTML 元素沒有暴露全域建構子。標準方式：

// 正確建立按鈕元素
const btn = document.createElement('button');
btn.textContent = 'Click me';
document.body.appendChild(btn);

// 正確建立表單元素
const form = document.createElement('form');
form.action = '/submit';
form.method = 'POST';

為什麼標準不提供 new Button()？

1. 語意分離：元素建立屬於文件操作，應透過 document 工廠方法，而非全域建構子。
2. 生命週期管理：createElement 可確保元素擁有正確的 ownerDocument、命名空間與事件繼承鏈。
3. 向後相容：早期瀏覽器僅實作 Image、Option、Audio 等少數建構子，後續標準化決定不再擴展。

特例清單（確實存在的全域建構子）

最佳實務

• 統一使用 document.createElement(tagName) 建立任意元素。
• 需預載圖片時，可用 new Image() 但記得它不是 DOM 節點，需再 document.createElement('img') 並設定 src 才能插入頁面。
• 使用 TypeScript 時，啟用 dom lib 可獲得完整型別提示，避免誤用不存在的建構子。

結語

Image 是歷史遺留的特例，服務於圖片預載與 Canvas；其餘元素請遵循 DOM 標準，透過 document.createElement() 建立。理解這層設計哲學，能避免在控制台看到紅字報錯。