DOM 和 BOM 都是前端開發中重要的概念，但它們代表不同的物件，並具有不同的功能：
DOM（文件物件模型 - Document Object Model）
- 定義： DOM 是 HTML 和 XML 文件的程式設計介面。它代表了文件的內容和結構，允許開發者使用 JavaScript 等語言來訪問和操作這些內容。
- 作用： 透過 DOM，開發者可以動態地建立、修改和刪除 HTML 元素、屬性和文字內容。例如，可以更改元素的樣式、新增事件監聽器、動態顯示或隱藏元素等。
- 層次結構： DOM 將文件表示為一個樹狀結構，每個 HTML 元素都是樹中的一個節點。這種層次結構使得開發者可以輕鬆地遍歷和操作文件的各個部分。
- 獨立性： DOM 是與瀏覽器無關的，它是由 W3C 標準化的。這意味著使用 DOM 編寫的程式碼理論上可以在任何支援 DOM 的瀏覽器中執行。
- 示例： 使用
document.getElementById("myElement")獲取 ID 為 "myElement" 的元素，然後修改其內容或樣式。
BOM（瀏覽器物件模型 - Browser Object Model）
- 定義： BOM 提供了與瀏覽器視窗互動的介面。它允許開發者訪問和操作瀏覽器視窗的屬性和方法，例如導航、歷史記錄、螢幕大小等。
- 作用： 透過 BOM，開發者可以控制瀏覽器視窗的行為，例如開啟新視窗、關閉視窗、彈出對話方塊、獲取瀏覽器資訊等。
- 層次結構： BOM 的核心物件是
window物件，它代表了整個瀏覽器視窗。其他 BOM 物件，例如navigator、history、screen和location，都是window物件的屬性。 - 瀏覽器依賴性： BOM 並非 W3C 標準，它是由各個瀏覽器廠商實現的。這意味著不同的瀏覽器可能會有不同的 BOM 實現，導致程式碼的相容性問題。
- 示例： 使用
window.location.href = "https://www.google.com"跳轉到 Google 的網站，或者使用window.alert("Hello!")彈出一個警告框。
關鍵區別總結：
| 特性 | DOM | BOM |
|---|---|---|
| 物件 | HTML 和 XML 文件 | 瀏覽器視窗 |
| 作用 | 操作文件內容和結構 | 與瀏覽器互動 |
| 標準化 | W3C 標準 | 非標準 (瀏覽器特定) |
| 核心物件 | document |
window |
總而言之，DOM 用於操作網頁的內容，而 BOM 用於與瀏覽器本身進行互動。 在實際開發中，經常會同時使用 DOM 和 BOM 來實現各種功能。