HTML DOM 與元素標籤的區別：從文檔到對象模型的映射關係

核心結論

HTML DOM（Document Object Model）與元素標籤不是一個意思。

• 元素標籤：寫在 HTML 文檔中的標記語言代碼，如 <button id="myBtn">點擊這裡</button>，屬於靜態文本。
• DOM 元素節點：瀏覽器解析 HTML 後，在內存中構建的樹狀結構（DOM 樹）中的節點對象，擁有屬性（id、className 等）和方法（click()、addEventListener() 等）。

對應關係

每個 HTML 元素標籤在 DOM 樹中都有一個對應的 元素節點。例如：

// HTML 文檔
<button id="myBtn">點擊這裡</button>

// JavaScript 獲取對應的 DOM 元素節點
const btn = document.getElementById('myBtn'); // 返回 HTMLButtonElement 實例
console.log(btn.tagName); // "BUTTON"
btn.addEventListener('click', () => alert('DOM 節點的方法'));

關鍵差異表

為什麼要區分？

理解這層映射關係有助於：

1. 正確使用 document.createElement() 動態創建節點，而非拼接 HTML 字符串。
2. 理解事件委託、虛擬 DOM 等進階概念的基礎。
3. 避免 XSS 風險：操作 DOM 屬性（textContent）比拼接 innerHTML 更安全。