[TOC]
* * * * *
### 一、什么是BOM
#### **1. 概述**
瀏覽器對象模型（Browser Object Model (BOM)）是JavaScript的組成之一，他提供了獨(dú)立與內(nèi)容與瀏覽器窗口進(jìn)行交互的對象，使用瀏覽器對象模型可以實(shí)現(xiàn)與HTML的交互。
#### **2. 核心 window 對象**
BOM 的核心對象是 window ，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中， window 對象有雙重角色，它既是通過 JavaScript 訪問瀏覽器窗口的一個(gè)接口，又是 ECMAScript 規(guī)定的 Global 對象。
- 通過window可以操作整個(gè)瀏覽器。
- 所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
- 所有 JavaScript 全局對象、函數(shù)以及變量均自動(dòng)成為 window 對象的成員。
- 全局變量是 window 對象的屬性。
- 全局函數(shù)是 window 對象的方法。
- 甚至 HTML DOM 的 document 也是 window 對象的屬性之一：
BOM 和 DOM 的關(guān)系可以用下圖表示
0
### 二、BOM操作
#### **1. window對象**
```JavaScript
window.close(); //關(guān)閉窗口
window.alert("message"); //彈出一個(gè)具有OK按鈕的系統(tǒng)消息框，顯示指定的文本
window.confirm("Are you sure?"); //彈出一個(gè)具有OK和Cancel按鈕的詢問對話框，返回一個(gè)布爾值
window.prompt("What's your name?", "Default"); //提示用戶輸入信息，接受兩個(gè)參數(shù)，即要顯示給用戶的文本和文本框中的默認(rèn)值，將文本框中的值作為函數(shù)值返回
window.status //可以使?fàn)顟B(tài)欄的文本暫時(shí)改變
window.defaultStatus //默認(rèn)的狀態(tài)欄信息，可在用戶離開當(dāng)前頁面前一直改變文本
window.setTimeout(function(){}, 1000) //設(shè)置在指定的毫秒數(shù)后執(zhí)行指定的代碼，接受2個(gè)參數(shù)，要執(zhí)行的代碼和等待的毫秒數(shù)
window.clearTimeout("ID") //取消還未執(zhí)行的暫停，將暫停ID傳遞給它
window.setInterval(function(){}, 1000) //無限次地每隔指定的時(shí)間段重復(fù)一次指定的代碼，參數(shù)同setTimeout()一樣
window.clearInterval("ID"); //取消時(shí)間間隔，將間隔ID傳遞給它
window.history.go(-1); //訪問瀏覽器窗口的歷史，負(fù)數(shù)為后退，正數(shù)為前進(jìn)
window.history.back(); //訪問瀏覽器窗口的歷史，負(fù)數(shù)為后退，正數(shù)為前進(jìn)
window.history.forward(); //訪問瀏覽器窗口的歷史，負(fù)數(shù)為后退，正數(shù)為前進(jìn)
window.history.length //可以查看歷史中的頁面數(shù)
```
#### **2 document 對象**
```JavaScript
document對象：實(shí)際上是window對象的屬性，document == window.document為true，是唯一一個(gè)既屬于BOM又屬于DOM的對象
document.lastModified //獲取最后一次修改html文檔的日期的字符串表示
document.referrer //用于跟蹤用戶從哪里鏈接過來的
document.title //獲取當(dāng)前頁面的標(biāo)題，可讀寫
document.URL //獲取當(dāng)前頁面的URL，可讀寫
document.anchors[0]或document.anchors["anchName"] //訪問頁面中所有的錨
document.forms[0]或document.forms["formName"] //訪問頁面中所有的表單
document.images[0]或document.images["imgName"] // 訪問頁面中所有的圖像
document.links [0]或document.links["linkName"] //訪問頁面中所有的鏈接
document.applets [0]或document.applets["appletName"] //訪問頁面中所有的Applet
document.embeds [0]或document.embeds["embedName"] //訪問頁面中所有的嵌入式對象
document.write(); 或document.writeln(); //將字符串插入到調(diào)用它們的位置
```
#### **3. location對象**
```JavaScript
location對象：表示載入窗口的URL，也可用window.location引用它
location.href //當(dāng)前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm
location.portocol //URL中使用的協(xié)議，即雙斜杠之前的部分，如http
location.host //服務(wù)器的名字，如www.wrox.com
location.hostname //通常等于host，有時(shí)會(huì)省略前面的www
location.port //URL聲明的請求的端口，默認(rèn)情況下，大多數(shù)URL沒有端口信息，如8080
location.pathname //URL中主機(jī)名后的部分，如/pictures/index.htm
location.search //執(zhí)行GET請求的URL中的問號(hào)后的部分，又稱查詢字符串，如?param=xxxx
location.hash //如果URL包含#，返回該符號(hào)之后的內(nèi)容，如#anchor1
location.assign("http:www.baidu.com"); //同location.href，新地址都會(huì)被加到瀏覽器的歷史棧中
location.replace("http:www.baidu.com"); //同assign()，但新地址不會(huì)被加到瀏覽器的歷史棧中，不能通過back和forward訪問
location.reload(true | false); //重新載入當(dāng)前頁面，為false時(shí)從瀏覽器緩存中重載，為true時(shí)從服務(wù)器端重載，默認(rèn)為false
```
#### **4. navigator對象**
`navigator` 對象：包含大量有關(guān)Web瀏覽器的信息，在檢測瀏覽器及操作系統(tǒng)上非常有用，也可用window.navigator引用它
```JavaScript
navigator.appCodeName //瀏覽器代碼名的字符串表示
navigator.appName //官方瀏覽器名的字符串表示
navigator.appVersion //瀏覽器版本信息的字符串表示
navigator.cookieEnabled //如果啟用cookie返回true，否則返回false
navigator.javaEnabled //如果啟用java返回true，否則返回false
navigator.platform //瀏覽器所在計(jì)算機(jī)平臺(tái)的字符串表示
navigator.plugins //安裝在瀏覽器中的插件數(shù)組
navigator.taintEnabled //如果啟用了數(shù)據(jù)污點(diǎn)返回true，否則返回false
navigator.userAgent //用戶代理頭的字符串表示
```
我們經(jīng)常使用navigator對象來判斷平臺(tái)的類型，比如:
```JavaScript
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
var isMobile = !!u.match(/AppleWebKit.*Mobile.*/) //是否為移動(dòng)終端
var isIpad = u.indexOf('iPad') > -1 //是否iPad
var isWecath = u.indexOf('MicroMessenger') > -1 //是否微信
var isIE = u.indexOf('Trident') > -1 //IE內(nèi)核
var isWebkit = u.indexOf('AppleWebKit') > -1 //蘋果、谷歌內(nèi)核
var isFireFox = u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1 //火狐內(nèi)核
var isOpera = u.indexOf('Presto') > -1 //opera內(nèi)核
```
#### **5. screen對象**
`screen`對象：用于獲取某些關(guān)于用戶屏幕的信息，也可用window.screen引用它
```JavaScript
screen.width/height //屏幕的寬度與高度，以像素計(jì)
screen.availWidth/availHeight //窗口可以使用的屏幕的寬度和高度，以像素計(jì)
screen.colorDepth //用戶表示顏色的位數(shù)，大多數(shù)系統(tǒng)采用32位
window.moveTo(0, 0); //控制瀏覽器滾動(dòng)條的位置
window.resizeTo(screen.availWidth, screen.availHeight); //填充用戶的屏幕
```
