DOM與BOM（web作業）
阿新 • • 發佈：2018-11-12
本文主要介紹DOM與BOM來源，方法，內容與應用。
DOm
來源：
文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上，組織頁面（或文件）的物件被組織在一個樹形結構中，用來表示文件中物件的標準模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。
內容:
HTML DOM （文件物件模型）
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為物件的樹。
HTML DOM 樹
通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
應用:
- 改變 HTML 元素的內容 (innerHTML)
- 改變 HTML 元素的樣式 (CSS)
- 對 HTML DOM 事件對做出反應
- 新增或刪除 HTML 元素
BOm
內容
BOM(Browser Object Model) 是指瀏覽器物件模型，是用於描述這種物件與物件之間層次關係的模型，瀏覽器物件模型提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構。BOM由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件都是該物件的子物件。方法
| 屬性名 | 描述 |
|---|---|
| navigator | 瀏覽器資訊 |
| location | 瀏覽器定位和導航 |
| history | 視窗瀏覽器歷史 |
| screen | 資訊 |
location:
代表瀏覽器的定位和導航。可以使用 location 來操作 URL 中的各個部分。最常用的有 href 屬性，當前訪問資源的完整路徑。
- assign(url) 載入新的 url，記錄瀏覽記錄
- replace(url) 載入新的 url 不記錄瀏覽記錄
- reload() 重新載入當前頁
history:
瀏覽器當前視窗的瀏覽歷史。
- back(int) 後退
- forward(int) 前進
- go(int) 正數向前，附屬向後
screen:
其中包含螢幕資訊。其中 avil- 開頭的屬性為可用屬性，其餘則為顯示器裝置屬性。