訪問和操作瀏覽器窗口的模型稱為瀏覽器對象模型BOM（Browser Object Model）。
BOM整體對象圖。
核心是window對象；
以下有特殊雙重身份：
window對象既是ECMAScript規范中的Global對象，也是BOM中的頂級對象；
document對象既是BOM頂級對象的一個屬性，也是DOM模型中的頂級對象
location對象既是window對象的屬性，同時也是document對象的屬性。
1. window對象 （從兩個方面看待：ECMAScript規范中的Global對象，也是BOM中的頂級對象）
1.1 window作為ECMAScript中的Global對象
1_引用window對象的屬性和方法時，可以省略window。（就像Globle對象一樣）
2_在全局作用域中this和window指向同一個對象，另外，還可以使用self來引用window對象，全等關系即：this===window===self。
3_在全局作用域中定義的變量和函數也會成為window對象的屬性和方法，但是和直接在window對象上定義屬性還是有區別：
a、全局變量不能使用delete刪除（相當於給window定義屬性時將屬性特性[[Configurable]]賦值為false了），
直接在window對象上定義的屬性可以使用delete刪除（直接定義window對象時屬性特性[[Configurable]]賦值默認為true）。
如果同時定義了全局變量和window對象的屬性，則刪除window屬性時不起作用。
b、嘗試訪問未定義的全局變量會拋出異常，但是訪問未定義的window對象的屬性則只是返回undefined。(這里可以很好地利用此特性進行檢測兼容性）
var name = 'Games'; //全局作用域中定義的變量和函數會成為window對象的屬性和方法，但是不能使用delete刪除 function getName(){ return this.name; } console.info(window.name); // Games console.info(window.getName()); // Games console.info(this == window); // true console.info(this == self); // true console.info(window == self); // true window.name = 'Kobe'; //直接在window對象上定義屬性，會同時修改全局變量的值，相反，修改全局變量的值，window對象的屬性值也會修改 console.info(name); delete window.name; //既定義了全局變量，又在window對象上定義了屬性，刪除時雖然沒有報錯，但是並沒有起作用 console.info(name); //Kobe console.info(window.name); //Kobe window.team = 'cavs'; //直接在window對象上定義屬性，可以使用delete刪除 console.info(window.team); delete window.color; console.info(window.color); //undefined
1.2 window作為BOM中的頂級對象
1.2.1 瀏覽器整個窗口與框架
沒有子框架時：window、self、top和parent都相等，都是指最頂層框架，即瀏覽器窗口。
有子框架時：window、self 和 top 都為最頂層框架，parent指向當前框架的直接上層框架.
如果頁面中包含框架，則每個框架都有自己的window對象，並且保存在父窗口的frames集合中.
可以通過索引（從0開始，從左至右，從上至下）或者框架名稱name屬性訪問相應的window對象。每個window對象都有一個name屬性，表示所處框架的名稱。
//下面是一個包括框架的頁面<html> <head> <title>Window</title> </head> <frameset rows="160,*"> <frame src="frame.htm" name="topFrame"> <frameset cols="50%,50%"> <frame src="leftrframe.htm" name="leftFrame"> <frame src="rightrframe.htm" name="rightFrame"> </frameset> </frameset> </html>
1.2.2 window作為頂層對象的主要方法:
| 方法名 | 說明 | |
| 打開新窗口 | open() | 返回新打開窗口的引用，利用該引用可以繼續操作該新窗口 |
| 窗口移動到的位置 | moveTo(x,y) | x和y表示新位置的x和y坐標值 只適用於最外層window對象 |
| 窗口移動的尺寸 | moveBy(x,y) | x和y表示在水平和垂直方向上移動的像素數 只適用於最外層window對象 |
| 窗口寬高尺寸 | resizeTo(x,y) | x和y表示瀏覽器窗口的新寬度和新高度 只適用於最外層window對象 |
| 窗口寬高變化尺寸 | resizeBy(x,y) | x和y表示瀏覽器窗口的寬高變化尺寸 只適用於最外層window對象 |
| 提示框 | alert() | 提示框-顯示時包含傳入的字符串和“確定”按鈕 |
| 確認框 | confirm() | 確認框-點擊“確認”返回true，點擊“取消”返回false |
| 文本輸入框 | prompt() | “確認”按鈕（返回文本輸入域的內容）、“取消”按鈕（返回null）和文本輸入域。 |
| 搜索對話框 | find() | 等同使用瀏覽器菜單欄的“查找”命令打開對話框 |
| 打印對話框 | print() | 等同使用瀏覽器菜單欄的“打印”命令打開對話框 |
| 定時器只執行一次 | setTimeOut() | 參數為：執行函數或代碼、執行代碼前需要等待的時間（毫秒） |
| 取消一次定時器 | clearTimeOut() | 參數為setTimeout()的引用 |
| 循環執行 | setInterval() | 參數為：執行函數或代碼、循環執行代碼的間隔時間（毫秒） |
| 取消循環執行 | clearInterval() | 參數為setInterval()的引用 |
兼容性：表示窗口位置的屬性有screenLeft、screenTop、screenX、screenY、表示窗口大小的屬性有innerWidth、innerHeight、outerWidth、outerHeight，但是它們的具體含義和不同的瀏覽器密切相關。在處理瀏覽器差異性建議使用JS框架。
2. history對象
history對象保存着從窗口被打開起的歷史記錄，每個瀏覽器窗口、標簽頁、框架都有自己的history對象。
history對象的主要屬性和方法有：
| 屬性或方法 | 說明 | 例子 |
| length | 歷史記錄的數量 | 判斷為第一個窗口：if(history.length == 0) |
| go() | 0表示刷新頁面 | history.go(0); |
| 負數表示向后跳轉 | history.go(-1); | |
| 正數表示向前跳轉 | history.go(1); | |
| 字符串參數，表示跳轉到歷史記錄中包含該字符串的最近一個位置 （可能前進，也可能后退） |
history.go(' nba '); | |
| back() | 后退一頁，可模仿瀏覽器“后退”按鈕 | history.back();相當於history.go(-1); |
| forward() |
前進一頁，可模仿瀏覽器“前進”按鈕 | history.forward();相當於history.go(1); |
3. location對象
location對象提供了與當前窗口中加載的文檔有關的信息以及一些導航功能;
它既是window對象的屬性，同時也是document對象的屬性.
主要屬性有：
| 屬性 | 例如 | 說明 |
| href | http://www.nba.com | 返回當前完整的URL地址==location.toString() |
| host | www.nba.com:80 | 返回服務器名稱和端口號 |
| hostname | www.nba.com | 返回服務器名稱 |
| port | 8080 | 返回URL中指定的端口號,如果沒有,返回空字符串 |
| pathname | /games/2015 | 返回URL中的目錄和文件名 |
| protocol | http: | 返回頁面使用的協議，通常是http:或https: |
主要方法有：
| 方法 | 例如 | 說明 |
| search | ？username=Games | 返回URL的查詢字符串，這個字符串以問號開頭 |
| assign() | location.assign(url) | 立即打開新URL並在瀏覽器歷史中生成一條記錄，相當於直接設置location.href值， 也可以修改location對象的其它屬性來重新加載 |
| replace() | location.replace(url) | 打開新URL，但是不會生成歷史記錄，使用replace()之后，用戶不能通過“后退”回到前一個頁面 |
| reload() | location.reload([true]) | 重新加載當前頁面，不傳遞參數時會以最有效方式加載（可能從緩存中加載）， 傳入true時，則強制從瀏覽器重新加載 |
常用情況，將url后面參數鍵值對分別添加到對象中保存。例如url?username=Games&age=31,取出args[“username”]=”Games”,args[‘age’]=31;
function getQueryStringArgs(){ //用逗號隔開可用var進行多個變量聲明 var qs = (location.search.length > 0 ? location.search.slice(1) : ""), //如果？后無數據，則返回空數組，並且去掉查詢字符串前面的問號 args = {}, //空對象用於接收數據 items = qs.length ? qs.split("&") : [], //將參數以&分隔 item = null, name = null, value = null, i = 0, len = items.length; for (i=0; i < len; i++){ //循環處理，將每一個參數的名稱和值加入到參數對象中 item = items[i].split("="); //通過等號分割，返回數組 name = decodeURIComponent(item[0]); //進行編碼處理 value = decodeURIComponent(item[1]); if (name.length){ args[name] = value; //鍵值對匹配添加到對象中 } } return args; } var args = getQueryStringArgs(); //假定查詢字符串返回?username=Gamest&age=31 console.info(args["usename"]); //"Gamest" console.info(args["num"]); //"10"
4. navigator對象
navigator對象用來描述瀏覽器本身，包括瀏覽器的名稱、版本、語言、系統平台、用戶特性字符串等信息.
但是各個瀏覽器及瀏覽器的不同版本之間對這個對象的實現也不盡相同.
特性檢測：
不建議直接使用navigator的方法或屬性進行檢測瀏覽器版本，在使用特定方法時，如果擔心兼容性，則可以使用特性檢測。
function getElement(id){ if(document.getElementById){ //特性檢測，如果支持，優先使用document.getElementById() return document.getElementById(id); }else { return document.all[id]; //如果不支持getElementById方法則返回document.all } }
特性檢測並不總是能湊效,
5. screen對象
screen對象用來表明客戶端顯示器的能力。多用於測定客戶端能力的站點跟蹤工具中。
包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等，每個瀏覽器中的screen對象都包含着各不相同的屬性。
其中五大瀏覽器都支持的屬性有：
| 屬性 | 說明 |
| height | 屏幕的像素高度 |
| width | 屏幕的像素寬度 |
| availHeight | 屏幕的像素高度減系統部件高度之后的值 |
| availWidth | 屏幕的像素寬度減系統部件寬度之后的值 |
實例：調整瀏覽器窗口的大小，使其占據屏幕的可用空間
window.resizeTo(screen.availWidth, screen.availHeight);
6. document對象
document對象既是BOM頂級對象的一個屬性，更是DOM模型中的頂級對象，在DOM中一起總結。