簡介瀏覽器環境
瞭解瀏覽器環境的組成和運作方式
本篇主軸是瞭解在網頁運作時的瀏覽器環境，瀏覽器環境在 JavaScript 規範手冊中又稱之為宿主環境（ host environment ），宿主環境的概念是一個提供各種不同功能給平台的環境，而這些平台就如瀏覽器、網頁伺服器或是其他等。
對於瀏覽器環境而言，環境中除 JavaScript 核心語言外，同時也提供原生的物件和函式，包含 DOM、BOM、CSSOM 等，可以想像瀏覽器環境是一間大廚房，廚房中有許多既有食材、器具可供使用，而廚師執行各個步驟，操作或組合所有食材與器材，最終誕生一道可口佳餚。
網頁的畫面即藉由瀏覽器環境中附有的功能或工具，透過 JavaScript 執行運作，呈現出網頁的畫面顯示，綜觀瀏覽器環境以下面架構圖表示：
上圖呈現瀏覽器環境的基本架構，架構最頂層是 window 物件，其中區分出 JavaScript 核心語言外和原生物件模型如 DOM 和 BOM 等，以下簡介架構內各基本元素的功能：
料理超盤手 — JavaScript
JavaScript 程式語言在整個瀏覽器環境中扮演操控的角色，透過 JavaScript 執行瀏覽器環境中 DOM 和 BOM 所提供的 Web APIs 外，也可藉由 Script 標籤封裝各種變數和函式操作來執行自訂的功能，如前述比喻 JavaScript 程式語言就是扮演廚師的靈魂角色，使用廚房內已提供的器具或可自備食材，整合各類工具的使用，執行整個烹飪的過程。
實際上 JavaScript 又是如何取得這些 Web APIs 來操作呢？從架構圖來看，瀏覽器環境中的根節點是 window 物件，而 window 物件會存放瀏覽器環境下原有的 Web APIs ，對於 JavaScript 而言，window 物件即是全域物件，全域物件提供變數和函式讓 JavaScript 隨處可拿到對應的工具進行操作，如取得瀏覽器視窗的尺寸資訊、平台裝置資訊等，詳細操作可見 MDN 中各式瀏覽器功能的介紹。
主食材 — DOM
DOM（Document Object Model）為文件物件模型，主要提供網頁元素操作的功能，如讓網頁內的元素可以新增、移除或修改等，就好比是料理時的各種食材，經由廚師的煎炒蒸煮最後產出的一道料理。
根據規範定義，DOM 是指一種用於獲取或操控 documents 的 APIs，而 documents 泛指任何標記的資源，如 HTML documents 、XML documents 等，並以節點樹 （node tree） 形式呈現。就以下列 HTML documents 為範例，HTML 解析的過程將標記語法轉換成節點樹，其中每個 HTML 標籤皆有對應的節點，而每一個節點會都是一個物件，如標籤中的文字會對應到文字節點（text node），值得一提的是，其中連空白也會解析成文字節點，若想更加瞭解其中運作，可參見「瀏覽器渲染機制」一文。
節點樹的每一個節點都是物件，而這些物件組合後可構成網頁的內容，利用 JavaScript 操控 DOM 的節點，在程式中以 document 為進入點來獲取節點樹中的各個節點，並對其新增、刪除、修改或變化節點或其樣式等，藉此來操作網頁中的顯示畫面。
<!DOCTYPE html>
<html class=e>
<head><title>Aliens?</title></head>
<body>Why yes.</body>
</html>
調味料 — CSSOM
CSSOM（CSS Object Model）是 CSS 物件模型，主要提供網頁元素中樣式相關的功能，他是一道料理中用來協助主食材，幫助做提味或添增視覺的輔助配角。
Get Chiao’s stories in your inbox
Join Medium for free to get updates from this writer.
根據規範定義，CSSOM 主要提供三大類型的 APIs 功能：
- Media Queries：在網頁套用樣式前，可先詢問媒體類型的屬性，如螢幕、朗讀、印刷等，並可藉由邏輯判斷來決定套用的樣式，常見的範例如製作響應式網頁時，透過判斷螢幕寬度調整樣式。
- Selectors：樣式選取器主要定義選取的方式，主要有 universal selector 、attribute selector、class selector、ID selector、pseudo-class。
- CSS 本身：包含 CSS rules 、stylesheets 、CSS 宣告和 CSS 數值。
CSSOM 樣式會對應到每個 DOM 元素，因此可使用 JavaScript 來操作新增、刪除或修改 DOM 元素的樣式，而 CSSOM 與 DOM 合併後形成「Render tree」，這個部分也是「瀏覽器渲染機制」文中的一環。
擺盤器材 — BOM
BOM（Browser Object Model）為瀏覽器物件模型，相較於 DOM 主要是針對網頁內元素進行操作，BOM 則提供 documents 以外的瀏覽器功能，就以料理角度來看，BOM 如同用來承裝佳餚的餐盤，提供一道料理中佳餚以外的其他基本功能。
BOM 的 Web APIs 包含各類方法或屬性，以下介紹幾個常見的功能：
- setTimeout()：藉由函式來設定計時器功能的全域方法，在指定時限後執行特定的程式碼。
- navigator：可提供平台和作業系統的背景資訊，如：navigator.userAgent 提供目前瀏覽器的背景資訊、navigator.platform 提供作業系統資訊（Windows/Linux/Mac etc）。
- location：提供頁面網址和重新導向的資訊。
- alert/confirm/prompt：提供瀏覽器與使用者互動的原生功能。
文章總結
到目前為止，我們介紹瀏覽器環境是一個提供瀏覽器平台各類功能的環境，而環境中除 JavaScript 程式語言外，也具有瀏覽器原生 APIs，這些 APIs 可大致分為提供 DOM （documents 相關功能）、 CSSOM （CSS 相關功能）、BOM （documents 以外相關功能）等物件模型，透過 JavaScript 程式語言可執行前述各類物件模型，至於實際上有哪些好有趣和厲害的瀏覽器原生 APIs 呢？後續再補充介紹一些有趣的 Web API ～
