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

1 windows對(duì)象

windows對(duì)象：表示瀏覽器的框架以及與其相關(guān)的內(nèi)容，比如滾動(dòng)條和導(dǎo)航欄圖標(biāo)等等?；蛘哒fwindows對(duì)象就代表瀏覽器本身。windows對(duì)象是個(gè)全局對(duì)象，他不需要使用名稱訪問自己的屬性和方法。

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

windows對(duì)象的某些屬性也是對(duì)象。這些屬性（對(duì)象）有l(wèi)ocation、history、document、navigator、screen。其中document屬性（對(duì)象）又包含forms、images、links等屬性（對(duì)象）。

2 history對(duì)象

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

2.1 屬性

屬性注釋

length	返回瀏覽器歷史棧中的 URL 數(shù)量

2.2 方法

方法注釋

back()	加載 history 列表中的前一個(gè) URL
forward()	加載 history 列表中的下一個(gè) URL
go()	加載 history 列表中的某個(gè)具體頁(yè)面

history.go(-1); //后退1個(gè)頁(yè)面 history.back();history.go(1); //前進(jìn)1個(gè)頁(yè)面 history.forward();history.go(-2); //后退2個(gè)頁(yè)面

3 location對(duì)象

3.1 屬性

location包含與當(dāng)前頁(yè)面位置有關(guān)的信息，常用屬性如下：

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

3.2 方法

方法注釋

reload()	重新加載當(dāng)前文檔
replace()	用新的文檔替換當(dāng)前文檔

使用新頁(yè)面替換當(dāng)前頁(yè)面

//方法一： //新頁(yè)面是加在歷史棧頂?shù)?#xff0c;可以使用back()來(lái)返回到原來(lái)的頁(yè)面 location.href ="newPage.html";//方法二： //使用replace()的本質(zhì)是用新頁(yè)面替換掉歷史棧中的舊頁(yè)面,因此無(wú)法通過history.back()退回到原來(lái)的頁(yè)面 location.replace("newPage.html");

4 navigator對(duì)象

navigator對(duì)象包含瀏覽器和運(yùn)行瀏覽器相關(guān)的信息

4.1 屬性

屬性注釋

appName	返回瀏覽器的模型
appVersion	返回瀏覽器的平臺(tái)和版本信息
appCodeName	返回瀏覽器的代碼名
platform	返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)
systemLanguage	返回 OS 使用的默認(rèn)語(yǔ)言
userLanguage	返回 OS 的自然語(yǔ)言設(shè)置
onLine	返回一個(gè)布爾值，指示指示瀏覽器是否處于脫機(jī)模式
cookieEnabled	返回一個(gè)布爾值，指示指示瀏覽器是否啟用了cookie
userAgent	返回由客戶機(jī)發(fā)送服務(wù)器的 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()	返回一個(gè)布爾值，指示瀏覽器是否支持并啟用了 Java

4.3 新增的geolocation

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

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

//編寫回調(diào)函數(shù) //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); //把系統(tǒng)返回的錯(cuò)誤對(duì)象作為回調(diào)函數(shù)的參數(shù)}navigator.geolocation.getCurrentPosition(geoSucess,geoError);

5 screen對(duì)象

Screen 對(duì)象包含有關(guān)客戶端顯示屏幕的信息

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

6 document對(duì)象

有關(guān)document的高級(jí)操作就是DOM，后面我會(huì)介紹，這里只簡(jiǎn)單介紹document對(duì)象的基礎(chǔ)用法。

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

document 有很多關(guān)聯(lián)的屬性，這些屬性是類似數(shù)組的結(jié)構(gòu)，即集合。常用的集合有forms、images、links。

6.1 屬性

cookie：設(shè)置或返回與當(dāng)前文檔有關(guān)的所有 cookie。該屬性是一個(gè)可讀可寫的字符串，可使用該屬性對(duì)當(dāng)前文檔的 cookie 進(jìn)行讀取、創(chuàng)建、修改和刪除操作。

domain：返回當(dāng)前文檔的域名。該屬性是一個(gè)只讀的字符串，包含了載入當(dāng)前文檔的 web 服務(wù)器的主機(jī)名。

lastModified：返回文檔被最后修改的日期和時(shí)間。該值來(lái)自于 Last-Modified HTTP 頭部，它是由 Web 服務(wù)器發(fā)送的可選項(xiàng)。

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

title：返回當(dāng)前文檔的標(biāo)題

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

6.2 方法

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

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

getElementsByTagName()：返回帶有指定標(biāo)簽名的對(duì)象集合

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

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

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

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

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

6.3 集合

6.3.1 images集合

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

<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 //獲取頁(yè)面的圖片位數(shù)量</script>

6.3.2 links集合

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

document.links.length //獲取頁(yè)面鏈接的數(shù)量

7 瀏覽器測(cè)試

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

7.1 特性檢測(cè)

特性檢測(cè)是指檢測(cè)瀏覽器是否支持某個(gè)特性的過程。

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

也可以寫成下面的格式:

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

7.2 瀏覽器嗅探

瀏覽器嗅探就是基于瀏覽器的userAgent字符串的，然而這個(gè)字段是可以被修改的，所以非常不可靠?？梢酝ㄟ^修改user-Agent來(lái)實(shí)現(xiàn)瀏覽器和操作系統(tǒng)的偽裝。

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

轉(zhuǎn)載于:https://www.cnblogs.com/whatisfantasy/p/6230327.html

總結(jié)

以上是生活随笔為你收集整理的js浏览器对象模型（BOM）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。