在本系列 JavaScript的重點複習完成後，就要進入筆者學習的最初衷：網頁設計應用了。

前提

一般咸認網頁前端包括三大部份：網頁（HTML）、CSS、JavaScript。他們分別職司資料結構、呈現樣式、行為與互動。雖然現今主流瀏覽器已完全支援JavaScript，但其實JavaScript「本身」並無法操作網頁。它還須依靠、「操作方法」以及執行方法的「執行平台（瀏覽器）」才能實現網頁中的行為與互動。

綜上，JavaScript存在於「瀏覽器」中的部份有三：

1. JavaScript核心
2. BOM 瀏覽器物件模型（Browser Object Model）
3. DOM 文件物件模型（Document Object Model）

BOM 瀏覽器物件模型

所謂BOM是瀏覽器功能的核心部份，進入HTML5時代，由W3C著手統合後，各家瀏覽器已有齊一的標準規範。

BOM的實際核心，是瀏覽器裡的windows物件，同時發揮全域物件（Global Object）與JavaScript/瀏覽器溝通的功能。提供主要屬性諸如：

• frames
• history
• location
• navigator
• screen

舉例來說，最常見的就是瀏覽器彈出的警告對話框（window.alert）。這我們在前面的『Day-06　始於足下：基本語法、陳述句與宣告』有演示過一次：

window.alert('Hello World');

除了window.alert，還有確定/取消對話框（window.confirm）、開放式問答（windows.prompt）都很常見。

DOM 文件物件模型

承上，藉由既有的BOM API，可以令JavaScript經由DOM來操作網頁內容。由於DOM以樹狀結構表徵HTML，因此又被稱為「DOM Tree」。

（圖源：PinClipart圖庫）

可以發現，document處於樹狀的根部，依此延伸出HTML、文本、屬性等等更多節點。JavaScript所使用的DOM API，可以令其存取、改變、綁定這些HTML的架構、內容、樣式以及事件。