前言
在剛開始學程式時，你是不是常常聽到一個說法：HTML、CSS 與 JavaScript 是網頁前端三大要素。HTML 主要是負責資料與結構，CSS 則負責樣式的呈現，而JavaScript 負責行為與互動。但其實JavaScript 並沒有提供網頁的操作方法，前端開發者在網頁的操作方法都是「瀏覽器」提供的。 這些操作方法基本上會分別由這兩種物件所擁有：「BOM」與「DOM」。
所以在瀏覽器上的 JavaScript 包含了：
- JavaScript 核心 (以 ECMAScript 標準為基礎)
- BOM (Browser Object Model，瀏覽器物件模型)
- DOM (Document Object Model，文件物件模型)
前端開發者就是透過 JavaScript 去呼叫 BOM 與 DOM 提供的 API，進一步透過它們去控制瀏覽器的行為與網頁的內容。
BOM是什麼
BOM (Browser Object Model，瀏覽器物件模型)，是瀏覽器所有功能的核心，與網頁的內容無關。早期沒有規範時，各家瀏覽器廠商自行開發瀏覽器的功能，非常混亂。 直到最近幾年， W3C 把各家瀏覽器統一集合起來納入了 HTML5 的標準中。因為在DOM Level 1標準定制前，BOM已經存在了，所以也可以稱作Level 0 DOM。
BOM 的核心其實是 window 物件。而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。
在瀏覽器裡的 window 物件扮演著兩種角色：
- ECMAScript 標準裡的「全域物件」 (Global Object)
- JavaScript 用來與瀏覽器溝通的窗口
Window 物件
在上面的內容有提到說，瀏覽器物件模型有著階層性的架構，最上層便是Window物件，代表著瀏覽器視窗本身，若是視窗中含有框架，則每個框架都還有屬於自己的window物件。
所有的BOM都可透過window來存取。window物件的使用不須經過宣告，可以直接使用。事實上，在Javcascript中，所有的全域變數、函式、物件，其實都是屬於window物件。舉例來說：
很明顯，全域變數x是window物件的一個屬性。事實上，上面使用到的 alert() 函式，也是window的一個方法。
常用的window屬性及說明
- closed：返回視窗是否已關閉
- defaultStats：用於瀏覽器狀態欄內的預設字符串
- document：document物件
- history：history物件
- innerheight：視窗內部高度，在IE8(包含)之前，無法使用。可以用document.documentElement.clientHeight作為代替
- innerwidth：視窗內部寬度，在IE8(包含)之前，無法使用。可以用document.documentElement.clientWidth作為代替
- length：返回框架數量
- location：location物件
- name：視窗名稱
- Navigator：Navigator物件
- opener：表示打開窗口的Window對象
- outerheight：返回視窗外部高度
- outerwidth：返回視窗外部寬度
- pageXOffset：當前頁面相對於視窗顯示區左上角的X位置
- pageYOffset：當前頁面相對於視窗顯示區左上角的Y位置
- parent：返回父視窗
- Screen：screen物件
- self：視窗本身的引用
- status：顯示瀏覽器狀態欄的字串
- top：最頂層祖先視窗
- window：視窗本身的引用
常用的window方法
- alert()：跳出一個警告訊息窗
- blur()：移除該視窗焦點
- clearInterval()：取消由 setInterval() 設定的計時器
- clearTimeout()：取消由 setTimeout() 方法設定的計時器
- close()：關閉瀏覽器視窗
- confirm()：跳出一個有確認與取消按鈕地確認框
- createPopup()：建立一個彈出視窗
- focus()：取得焦點
- moveBy()：以相對位置移動視窗
- moveTo()：移動視窗到指定位置
- open()：開啟一個新的瀏覽器視窗
- print()：輸出目前窗口內容
- prompt()：跳出可輸入訊息的對話
- resizeBy()：調整視窗大小
- resizeTo()：調整視窗大小
- scrollBy()：滾動內容
- scrollTo()：滾動內容
- setInterval()：計時器
- setTimeout()：計時器
DOM 是什麼
DOM (Document Object Model，文件物件模型)，是一個以樹狀結構來表示 HTML 文件的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。我們把 HTML 每個節點的關係攤來看，就好像是一棵樹一樣。我們舉例一個基本的HTML：
在最根部的地方，就是 document，就是 BOM 圖中 window 下面的那個。往下可以延伸出一個個的 HTML 標籤，一個節點就是一個標籤，往下又可以再延伸出「文本節點」與「屬性的節點」。
此時JavaScript就可以藉由DOM API去存取並改變HTML架構、樣式和內容的方法，JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。
總結以上幾點可以得知其實DOM的document也包含在BOM的window物件裡，所以BOM/DOM的最大差別在於：
- BOM: JavaScript 與瀏覽器溝通的窗口，不涉及網頁內容。
- DOM: JavaScript 用來控制網頁的節點與內容的標準。
取得DOM原型物件
在JavaScript文章中有提到JavaScript的基礎使用方式，那要如何用JavaScript取得網頁中的元素呢，取得元素的方式有四種：
- 根據ID名稱選取：document.getElementById(elementId)
- 根據元素名稱選取：document.getElementsByTagName(tagName)
- 根據名稱選取：document.getElementsByName(name)
- 根據 Class 名稱選取：document.getElementsByClassName(classname)
從中可以發現唯獨 Id 的 element 是單數，其他的都是複數（Elements），從這一點上就可以知道， Id 在每個頁面中都是唯一的，不能重複使用。以下舉一個用ID去取得目標getElementByID的例子
HTML
JavaScript
結語
通過以上的介紹希望大家可以更了解BOM/DOM的定義以及基礎知識，如果想要對JavaScript更系統化的瞭解，Udemy這裡開課囉！老師從基礎手把手的帶你，教你主流寫法提升 JS 開發能力！
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
