Back to Blog

BOM 與 DOM 的差異

在 JavaScript 中,我們常常會聽到 BOM 和 DOM 這兩個名詞,它們都是用來讓我們可以透過 JavaScript 來操作網頁的 API,但它們的範疇和功能有所不同。

#DOM (Document Object Model)

DOM,全名為文件物件模型 (Document Object Model),是 W3C 所制定的標準。它將整個 HTML 文件轉換成一個由節點 (node) 組成的樹狀結構,讓我們可以透過 JavaScript 來存取和操作文件中的任何元素,例如改變元素的內容、樣式、結構等。

DOM 的核心是 document 物件。

#BOM (Browser Object Model)

BOM,全名為瀏覽器物件模型 (Browser Object Model),是瀏覽器廠商自行實作的,沒有一個統一的標準。它提供了讓我們可以跟瀏覽器互動的 API,例如取得瀏覽器視窗的大小、導向到另一個頁面、跳出提示訊息等。

BOM 的核心是 window 物件,而 document 物件其實也是 window 物件下的一個屬性。

#總結

特性 DOM (Document Object Model) BOM (Browser Object Model)
標準 W3C 標準 無統一標準
核心物件 document window
功能 存取和操作 HTML 文件的內容 與瀏覽器視窗互動
範例 getElementById, querySelector alert, location, screen