瀏覽器物件 (BOM)

為了有別於 W3C 制定的 DOM 規範，早先瀏覽器為了控制網頁裡面結構所準備出來的類別庫，被稱為 BOM (Browser Object Model)。以現在的使用情況來看，你可以視它為操縱整個瀏覽器的 API。

BOM 的特徵是，它不需要使用 new 來建立，因為瀏覽器啟動時自動幫我們建立好這些物件。所以使用 BOM 的物件可以發現名稱都是小寫開頭，表示這些是變數名稱，或者說是指向物件的參照。

然而，BOM 其實不是標準規範的一部分，也就是 W3C 並未將這些函式庫列為共通規格。BOM 之所以被廣泛使用，是因為這些功能從 Netscape 制定這套 JavaScript 的類別庫以來，就被其它跟進的瀏覽器沿用至今，長年以來大家都使用這套類別庫寫 JavaScript 程式，所以現在即使覺得它不適合做為規範，W3C 也很難更動它，否則幾乎所有程式都無法正常執行。

總而言之 BOM 是舊時代的東西，可視為 HTML 4.01 時代的 JavaScript 開發慣例。進入 HTML5 時代，W3C 將 BOM 的 document 物件獨立出來，制定新的 Document DOM 來相容新舊時代的問題，讓我們以這個規範來改善 BOM 的架構。

document

早期 JavaScript 用來直接控制「網頁」或者說是「BODY 標籤」的物件，但有些屬於「HEAD 標籤」的訊息也被放在 document 存取。

alinkColor	存取網頁的 ALINKCOLOR 屬性。（超鏈結作用中的顏色）
alinkColor	存取網頁的 ALINKCOLOR 屬性。（超鏈結作用中的顏色）
bgColor	存取網頁的 BGCOLOR 屬性。（網頁背景色）
close()	關閉 open() 開啟的資料流。
cookie	存取 COOKIE。（一種保存使用者資料的機制）
domain	取得網頁所在伺服器的網域名稱。
fgColor	存取網頁的 FGCOLOR 屬性。（網頁前景色）
formName	藉由 FORM 標籤的 NAME 屬性來存取填表。
lastModified	取得網頁最後修改日期。
linkColor	存取網頁的 LINKCOLOR 屬性。（超鏈結文字的顏色）
onclick	在網頁上單擊滑鼠時觸發事件。
ondblclick	在網頁上雙擊滑鼠時觸發事件。
onkeydown	在網頁上按下鍵盤時觸發事件。
onkeypress	在網頁上按下鍵盤的字母鍵或數字鍵時觸發事件。
onkeyup	在網頁上放開鍵盤時觸發事件。
onmousedown	在網頁上按下滑鼠時觸發事件。
onmouseup	在網頁上放開滑鼠時觸發事件。
open()	開啟資料流給 write() 或 writeln() 使用。
referrer	取得先前網頁的網址。
title	存取網頁的 TITLE 屬性。（標題文字）
URL	取得網頁的網址。
vlinkColor	存取網頁的 VLINKCOLOR 屬性。（超鏈結作用後的顏色）
write()	在網頁寫入資料。
writeln()	在網頁寫入資料並附加 \n 字元。

document.anchors

早期 JavaScript 用來直接控制「錨點」的物件。所謂「錨點」是指 A 標籤使用 NAME 屬性設定的超鏈結，它可以讓瀏覽者跳躍到同一張網頁中某個超鏈結位置，而不是鏈結新的網頁。

length	取得錨點數量。
name	存取錨點名稱。

document.forms

早期 JavaScript 用來直接控制「填表」或者說是「FORM 標籤」的物件。

action	取得填表的 ACTION 屬性值。（處理資料的程式）
elements[索引值]	取得填表底下的組件。
encoding	取得填表的 ENCTYPE 屬性值。（傳送資料的編碼）
length	取得填表的數量。
method	取得填表的 METHOD 屬性。（傳送資料的方式）
name	取得填表的 NAME 屬性。（名稱）
onreset	填表重設時觸發事件。
onsubmit	填表遞交時觸發事件。
reset()	重設填表。
submit()	遞交填表。
target	取得填表的 TARGET 屬性。（顯示回報資料的方式）

document.images

早期 JavaScript 用來直接控制「影像」或者說是「IMG 標籤」的物件。

align	存取圖片的 ALIGN 屬性。（對齊方式）
alt	存取圖片的 ALT 屬性。（替代文字）
border	存取圖片的 BORDER 屬性。（邊框大小）
complete	取得圖片是否載入的狀態。
height	存取圖片的 HEIGHT 屬性。（高度）
hspace	存取圖片的 HSPACE 屬性。（左右側的空白間隔）
length	取得圖片的數量。
lowsrc	存取替代圖片的設定值。
name	存取圖片的 NAME 屬性。（名稱）
onabort	載入圖片的過程發生中斷時觸發事件。
onerror	載入圖片失敗時觸發事件。
onload	載入圖片成功時觸發事件。
src	存取圖片的 SRC 屬性。（圖檔與位置）
title	存取圖片的 TITLE 屬性。（滑鼠快顯標籤文字）
useMap	存取圖片的 USEMAP 屬性。（影像地圖）
vspace	存取圖片的 VSPACE 屬性。（上下空白的間隔）
width	存取圖片的 WIDTH 屬性。（寬度）。

document.links

早期 JavaScript 用來直接控制「超鏈結」或者說是「A 標籤」的物件。

hash	存取超鏈結的 NAME 屬性。（錨點）
host	取得鏈結的伺服器主機名稱與埠號。
hostname	取得鏈結的伺服器主機名稱。
href	存取超鏈結的 HREF 屬性。（鏈結目標）
length	取得超鏈結的數量。
onclick	按下超鏈結時觸發事件。
onmouseout	滑鼠移過超鏈結時觸發事件。
onmouseover	滑鼠移至超鏈結時觸發事件。
pathname	存取鏈結的檔案路徑。
port	取得鏈結目標的埠號。
protocol	取得鏈結目標的通訊協定。
search	取得鏈結目標的查詢參數。
target	存取超鏈結的 TARGET 屬性。（顯示目標的方式）
innerText	存取超鏈結顯示的文字內容。（建議改用 innerHTML）

假設網頁的第一個超鏈結如下：

<a href='http://twideem.or:8888/app/main.html?args=0'> LINK </a>
那使用 document.links[0] 分別傳回的值為：

document.links[0].host	傳回 twideem.or:8888
document.links[0].hostname	傳回 twideem.or
document.links[0].pathname	傳回 /app/main.html
document.links[0].port	傳回 8888
document.links[0].protocol	傳回 http
document.links[0].search	傳回 ?args=0

對於解析網址相當實用！

event

event 物件可用來獲取系統事件之傳遞的訊息。

altKey	鍵盤事件發生時，以 Boolean 值取得 Alt 鍵被按下的狀態。
ctrlKey	鍵盤事件發生時，以 Boolean 值取得 Ctrl 鍵被按下的狀態。
height	onresize 事件發生時，取得作用區域的高度。
pageX	滑鼠事件發生時，取得游標所在網頁的水平座標。
pageY	滑鼠事件發生時，取得游標所在網頁的水平座標。
screenX	滑鼠事件發生時，取得游標所在螢幕的水平座標。
screenY	滑鼠事件發生時，取得游標所在螢幕的垂直座標。
shiftKey	鍵盤事件發生時，以 Boolean 值取得 Shift 鍵被按下的狀態。
target	取得發生事件的來源物件。
type	取得事件的種類。
which	鍵盤或滑鼠事件發生時，取得按下的鍵。
width	onresize 事件發生時，取得作用區域的寬度。
x	滑鼠事件發生時，取得游標所在標籤區域的水平座標。
y	滑鼠事件發生時，取得游標所在標籤區域的垂直座標。

這個物件詭異的是，它在 Netscape 相容瀏覽器的存取方式，是隱含在函式的參數裡面。例如：

function f(事件參數) { 　對事件參數的使用 }
此外，event 物件的傳遞，只適用於 BOM 物件的 on 系列架構，因此正式的程式結構如下：

BOM 物件.on 系列事件=function(事件參數){ 　對事件參數的使用 };

來個範例，底下程式在你按下「Shift + 空白鍵」時，會顯示文字內容：

window.onkeydown=function(x){ if(x.shiftKey&&x.which==32) document.write('你按下了 Shift + 空白鍵！'); };
要注意的是！不同瀏覽器，鍵盤值的配置有些不一樣，比如說 Google Chrome 中，在 Num Lock 燈號未亮的狀態下，字母區的數字鍵 5 是 53，九宮格鍵的數字 5 卻是 101，但 Opera Browser 則沒有將數字分為字母區和九宮格區，兩邊的 5 都是 53。

再來一個範例，底下程式在你按下滑鼠時，網頁會顯示滑鼠游標的座標位置：

window.onmousedown=function(x){ document.write(x.screenX+','+x.screenY); };

history

history 物件提供追蹤瀏覽網頁紀錄的功能。

length	瀏覽過的網頁數量。
back()	返回上一個網頁。
forward()	返回下一個網頁。
go(索引值)	依索引值回到指定的網頁。

location

location 物件提供與瀏覽器當前網址相關的功能。

hash	存取瀏覽器網址的錨點。
host	存取瀏覽器網址中伺服器主機名稱與埠號的部分。
hostname	存取瀏覽器網址中伺服器主機名稱的部分。
href	存取瀏覽器網址。
pathname	存取瀏覽器網址中檔案路徑的部分。
port	存取瀏覽器網址中埠號的部分。
protocol	存取瀏覽器網址中通訊協定的部分。
reload()	重新載入網頁。
replace(網址)	以不會增加 history.length 紀錄的方式載入網頁。
search	存取瀏覽器網址中查詢參數的部分。

navigator

navigator 物件提供與瀏覽器軟體本身相關的功能，通常用來檢查使用者的作業系統、瀏覽器品牌、或者版本，是否符合執行程式的環境條件。

appCodeName	取得瀏覽器的開發代號，通常都是 Mozilla。
appName	取得瀏覽器的名稱。
appVersion	取得瀏覽器版本的詳細資訊。
cookieEnabled	傳回瀏覽器是否啟動 Cookie 功能。
mimeTypes	以陣列傳回瀏覽器支援的 MIME 格式。
platform	取得作業系統平台的類型簡稱。
plugins	以陣列傳回瀏覽器安裝的 Plugin 功能。
userAgent	相當於 appCodeName 加上 appVersion 的資訊。

screen

screen 物件提供桌面螢幕相關的使用方式。

availHeight	傳回桌面有效高度，或者說不包含工作列的高度。
availWidth	傳回桌面有效寬度，或者說不包含工作列的寬度。
colorDepth	傳回螢幕使用的顏色數量，通常以位元為單位。
height	傳回桌面的高度。
width	傳回桌面的寬度。

window

window 物件提供許多與瀏覽器視窗程式相關的使用項目。

其實 windows 是 BOM 最上層物件，所以像 document 正式的寫法是 window.document。但因為是最上層，所以通常被省略不寫。

alert(訊息)	顯示訊息用對話視窗。
blur()	讓視窗失去駐點。
clearInterval(變數名稱)	取消 setInterval()。
clearTimeout(變數名稱)	取消 setTimeout()。
close()	關閉新開啟的視窗。
closed	取得視窗是否關閉。
confirm()	顯示確認用對話視窗，會傳回 Boolean 值。
defaultStatus	存取狀態列的預設訊息。
focus()	讓視窗獲得駐點。
innerHeight	取得文件區域的高度。
innerWidth	取得文件區域的寬度。
length	取得頁框數量。
moveBy(水平距離,垂直距離)	依距離移動瀏覽器視窗的座標位置。
moveTo(水平座標,垂直座標)	設定瀏覽器視窗的座標位置。
name	新開啟視窗的名稱。
onbeforeunload	離開網頁前觸發事件。
onblur	瀏覽器視窗失去駐點時觸發事件。
onerror	JavaScript 發生錯誤時觸發事件。
onfocus	瀏覽器視窗獲得駐點時觸發事件。
onload	載入網頁完成時觸發事件。
onmove	瀏覽器視窗移動位置時觸發事件。
onresize	瀏覽器視窗調整尺寸時觸發事件。
onscroll	瀏覽器視窗捲動頁面時觸發事件。
onunload	離開網頁時觸發事件。
open(網頁,視窗名稱,選項)	開啟新的瀏覽器視窗。
opener	取得新視窗是由哪一個視窗開啟。
outerHeight	取得瀏覽器視窗總高度。
outerWidth	取得瀏覽器視窗總寬度。
pageXOffset	取得視窗水平捲動距離。
pageYOffset	取得視窗垂直捲動距離。
parent	應用在頁框中代表母框架。
print()	顯示列印用對話視窗。
prompt(訊息,預設值)	顯示輸入用對話視窗。
resizeBy(水平大小,垂直大小)	依大小調整瀏覽器視窗的尺寸。
resizeTo(寬度,高度)	設定瀏覽器視窗的尺寸。
screenX	瀏覽器視窗在螢幕中的水平位置。
screenY	瀏覽器視窗在螢幕中的重質位置。
scrollBy(水平距離,垂直距離)	依距離捲動頁面。
scrollTo(水平位置,垂直位置)	設定頁面捲動位置。
self	應用在頁框中代表當前框架。
setInterval(函式物件,毫秒,參數)	每隔一段時間就執行程式碼。
setTimeout(函式物件,毫秒,參數)	設定時間一到就執行一次程式碼。
status	存取狀態列的訊息。
top	應用在頁框中代表最上一層框架。

setTimeout() 和 setInterval() 的用法，基本上有三種。

第一種是傳入函式物件的參照，需要代入參數時，寫在第三個參數以後。例如五秒後執行 alert('hello')，可以這麼寫：

setTimeout(alert,5000,'hello');
注意！setTimeout() 或 setInterval() 第一個參數傳入的是「參照」，也就是函式物件的變數名稱，所以下面這個寫法是錯的：

setTimeout(alert(),5000,'hello'); //加上 () 會失效
第一個參數並不是用來呼叫函式的，而是用來寫遞迴函式的！所以要嘛傳入函式物件的參照進去，不然就直接用匿名函式寫一個函式物件進去，在第一個參數呼叫函式是無法正常讓 setTimeout() 或 setInterval() 運作的。

第二種是將函式連參數寫成字串來執行，行為類似 eval()，所以不推薦：

setTimeout('alert("hello")',5000);
第三種是使用匿名函式來呼叫 alert('hello')，避免如上範例寫成字串：

setTimeout(function(){ alert('hello'); },5000);

window.frames

早期 JavaScript 用來直接控制「頁框」或者說是「FRAME 標籤」的物件。

frames[索引值]	以陣列取得頁框底下的子頁框。
name	存取頁框名稱。
length	取得頁框的數量。
onblur	頁框失去駐點時觸發事件。
onfocus	頁框獲得駐點時觸發事件。

為了跨頁存取網頁，常常會用到 top、parent、以及 self 等特殊關鍵字，但坦白說蠻複雜的，往往會寫出這樣的程式：

top.frames[1].frames[0] parent.parent.frames[1].frames[0]
判斷的基準點，就是以撰寫 JavaScript 的這張網頁出發，往上追蹤看有多少層 parent 可以往上跳。或者一律使用 top 開始一一往下追蹤是最好的辦法。