js瀏覽器對象模型（BOM）

瀏覽器對象模型(Browser Object Model,BOM)：瀏覽器為js提供的對象集合。

1 windows對象

windows對象：表示瀏覽器的框架以及與其相關的內容，比如滾動條和導航欄圖標等等。或者說windows對象就代表瀏覽器本身。windows對象是個全局對象，他不需要使用名稱訪問自己的屬性和方法。

//下面的代碼本質是相同的
alert("hello!");window.alert("hello!");

windows對象的某些屬性也是對象。這些屬性（對象）有location、history、document、navigator、screen。其中document屬性（對象）又包含forms、images、links等屬性（對象）。

2 history對象

history對象跟蹤用戶訪問的每個頁面，這個頁面列表也叫做 history stack。用戶單機瀏覽器的 Back 和 Forward 按鈕，其本質就是在歷史棧里進行切換。

2.1 屬性

屬性	注釋
length	返回瀏覽器歷史棧中的 URL 數量

2.2 方法

方法	注釋
back()	加載 history 列表中的前一個 URL
forward()	加載 history 列表中的下一個 URL
go()	加載 history 列表中的某個具體頁面

history.go(-1);     //后退1個頁面
history.back();history.go(1);       //前進1個頁面
history.forward();history.go(-2);     //后退2個頁面

3 location對象

3.1 屬性

location包含與當前頁面位置有關的信息，常用屬性如下：

//設置或獲取整個 URL 為字符串
console.log(location.href);
/* http://localhost:63342/frontend_projects/test/index.html?_ijt=ll3ai4h2v873l9ukcm2g8a73hr  *///設置或獲取對象指定的文件名或路徑
console.log(location.pathname);
/* /frontend_projects/test/index.html*///設置或獲取與 URL 關聯的端口號碼
console.log(location.port);
/* 63342 *///設置或獲取 URL 的協議部分
console.log(location.protocol);
/* http: *///設置或獲取 href 屬性中在井號“#”后面的分段
console.log(location.hash);
/* *///設置或獲取 location 或 URL 的 hostname 和 port 號碼
console.log(location.host);
/* localhost:63342 *///設置或獲取 href 屬性中跟在問號后面的部分
console.log(location.search);
/* ?_ijt=1lrq8evbm5uovrl1ib8af65g5n */

3.2 方法

方法	注釋
reload()	重新加載當前文檔
replace()	用新的文檔替換當前文檔

使用新頁面替換當前頁面

//方法一：
//新頁面是加在歷史棧頂的，可以使用back()來返回到原來的頁面
location.href ="newPage.html";//方法二：
//使用replace()的本質是用新頁面替換掉歷史棧中的舊頁面,因此無法通過history.back()退回到原來的頁面
location.replace("newPage.html");

4 navigator對象

navigator對象包含瀏覽器和運行瀏覽器相關的信息

4.1 屬性

屬性	注釋
appName	返回瀏覽器的模型
appVersion	返回瀏覽器的平臺和版本信息
appCodeName	返回瀏覽器的代碼名
platform	返回運行瀏覽器的操作系統平臺
systemLanguage	返回 OS 使用的默認語言
userLanguage	返回 OS 的自然語言設置
onLine	返回一個布爾值，指示指示瀏覽器是否處于脫機模式
cookieEnabled	返回一個布爾值，指示指示瀏覽器是否啟用了cookie
userAgent	返回由客戶機發送服務器的 user-agent 頭部的值

var tmp1 = navigator.appName;
//Netscapevar tmp2 = navigator.appVersion;
//5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36var tmp3 = navigator.appCodeName;
//Mozillavar tmp4 = navigator.platform;
//Win32var tmp5 = navigator.systemLanguage;
//undefinedvar tmp6 = navigator.userLanguage
//undefinedvar tmp7 = navigator.onLine;
//truevar tmp8 = navigator.cookieEnabled;
//truevar tmp9 = navigator.userAgent;
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

4.2 方法

方法	注釋
javaEnabled()	返回一個布爾值，指示瀏覽器是否支持并啟用了 Java

4.3 新增的geolocation

H5中為navigator新增了geolocation屬性，并且geolocation也是對象。它可以獲取并利用設備的物理位置。

geolocation中最常用的就是getCurrentPosition()方法：

//編寫回調函數
//Geolocation.prototype.getCurrentPosition = function(successCallback,errorCallback,options) {};
function geoSucess(position) {var coords = position.coords;var latitude = coords.latitude;var longitude = coords.longitude;var message = "you are at "+latitude+","+longitude;alert(message);
}function geoError(errorObj) {alert(errorObj.message);  //把系統返回的錯誤對象作為回調函數的參數}navigator.geolocation.getCurrentPosition(geoSucess,geoError);

5 screen對象

Screen 對象包含有關客戶端顯示屏幕的信息

詳細信息參考：http://www.w3school.com.cn/jsref/dom_obj_screen.asp

6 document對象

有關document的高級操作就是DOM，后面我會介紹，這里只簡單介紹document對象的基礎用法。

document 是BOM中最常用的一個對象之一。通過這個對象可以訪問到頁面上的HTML元素以及其屬性和方法。

document 有很多關聯的屬性，這些屬性是類似數組的結構，即集合。常用的集合有forms、images、links。

6.1 屬性

cookie：設置或返回與當前文檔有關的所有 cookie。該屬性是一個可讀可寫的字符串，可使用該屬性對當前文檔的 cookie 進行讀取、創建、修改和刪除操作。

domain：返回當前文檔的域名。該屬性是一個只讀的字符串，包含了載入當前文檔的 web 服務器的主機名。

lastModified：返回文檔被最后修改的日期和時間。該值來自于 Last-Modified HTTP 頭部，它是由 Web 服務器發送的可選項。

referrer：返回載入當前文檔的文檔的 URL。如果當前文檔不是通過超級鏈接訪問的，則為 null。這個屬性允許客戶端 JavaScript 訪問 HTTP 引用頭部。

title：返回當前文檔的標題

URL：返回當前文檔的 URL。一般情況下，該屬性的值與包含文檔的 Window 的 location.href 屬性相同。不過，在 URL 重定向發生的時候，這個 URL 屬性保存了文檔的實際 URL，而 location.href 保存了請求的 URL。

6.2 方法

getElementById()：返回對擁有指定 id 的第一個對象的引用

getElementsByName()：返回帶有指定名稱的對象集合

getElementsByTagName()：返回帶有指定標簽名的對象集合

close()：關閉用 document.open() 方法打開的輸出流，并顯示選定的數據

open() ：打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出

write()：向文檔寫 HTML 表達式 或 JavaScript 代碼

writeln()：等同于 write() 方法，不同的是在每個表達式之后寫一個換行符

//效果相同
document.writeln("hello!")
document.write("hello!\n")

6.3 集合

6.3.1 images集合

頁面上的所有圖像都保存在images集合中,images[0]表示頁面上的第一個圖片位，依次類推。所以我們可以利用js來按需選擇要顯示的圖像源。

<img name="myImage" src="bg.jpg"/><script>var myImage = ["bj1.gif","bj2.gif","bj3.gif","bj4.gif"];var imgIndex = prompt("Enter a number from 0 to 3","");document.images[0].src = myImage[imgIndex];document.images.length //獲取頁面的圖片位數量</script>

6.3.2 links集合

對于每一個有href屬性的超鏈接元素<a/>，瀏覽器都會創建一個a對象。與images集合類似，頁面上的所有a對象都包含在links集合中。

document.links.length //獲取頁面鏈接的數量

7 瀏覽器測試

常用的代碼測試有兩種：特性檢測和瀏覽器嗅探

7.1 特性檢測

特性檢測是指檢測瀏覽器是否支持某個特性的過程。

//檢測瀏覽器是否支持navigator.geolocation
if(navigator.geolocation){//blablabla
}

也可以寫成下面的格式:

if(typeof navigator.geolocation!="undefined"){//blablabla
}//在支持geolocation的瀏覽器中，類型為"object，而在不支持geolocation的瀏覽器中，類型為"undefined"

7.2 瀏覽器嗅探

瀏覽器嗅探就是基于瀏覽器的userAgent字符串的，然而這個字段是可以被修改的，所以非常不可靠。可以通過修改user-Agent來實現瀏覽器和操作系統的偽裝。

//navigator.appName    返回瀏覽器的模型
//對IE返回"Microsoft Internet Explorer"，對Firefox、Chrome、Safari則返回"Netscape"//navigator.userAgent   返回瀏覽器與操作系統相關的信息
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36