什么是BOM

BOM:Browser Object Model 瀏覽器對象模型
BOM是JavaScript組成之一，它是瀏覽器窗口的API；
BOM的核心對象是window，所以BOM是全局對象，window是瀏覽器提供給JS的API。

BOM的常用API

window.name = xxx 會將當(dāng)前網(wǎng)頁的名字聲明為‘xxx’字符串，所以在JS中不要聲明name，因為var name = true等同于window.name = true那么name === 'true';typeof name === 'string'不能全局變量的字符串有哪些可以在控制臺輸入window回車查看。

window.open語句： let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]); 示例：window.open('http://www.baidu.com','_blank','left=100,top=100,width=100,height=100'//打開網(wǎng)頁
window.close() //關(guān)閉網(wǎng)頁
window.opener.close() //被打開的網(wǎng)頁關(guān)閉
window.history.back() || window.history.forward() || window.history.go(-1||2) //后退 前進 跳轉(zhuǎn)
window.location.reload(false/true) //重新加載當(dāng)前頁面
window.location = 'xxx' === window.location.href = 'xxx'//會在當(dāng)前路徑下的'xxx'路徑
window.location.protocol //獲取網(wǎng)頁協(xié)議
window.location.host //獲取域名
window.location.port //獲取端口
window.location.pathname //獲取路徑
window.location.search //獲取查詢字符串
window.location.hash //獲取錨點
window.navigator.(language 語言||userAgent 當(dāng)前是什么瀏覽器) //獲取瀏覽器的相關(guān)信息
window.pageX/YOffset //網(wǎng)頁滾動位置
window.confirm('xxx') //彈出確認和取消
window.scrollTo(500,500) //網(wǎng)頁滾動到（500，50）
window.outerWidth/outerHeight //獲取完整窗口大小
innerWidth/innerHeight //獲取文檔顯示區(qū)大小
resizeTo(width,height) //新窗口大小
location.replace(“url”) //當(dāng)前頁面打開不可后退
clearInterval(timer);time=null //定時器一次性
cleartimeout(timer);time=null //定時器周期性
clearInterval(timer); timer=null //停止定時器周期性
clearTimeout(timer); timer=null //停止定時器一次性
btn.addEventListener(“事件名”，函數(shù)對象) //添加事件監(jiān)聽
btn.remove //刪除事件監(jiān)聽
EventListener(“事件名”，函數(shù)對象)
e.stopPropagation() //阻止冒泡
e.preventDefault //取消事件（阻止默認行為）

BOM概述

BOM是browser object model的縮寫，簡稱瀏覽器對象模型

BOM提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，主要處理瀏覽器窗口和框架，不過通常瀏覽器特定的 JavaScript 擴展都被看做 BOM 的一部分。這些擴展包括：

1.彈出新的瀏覽器窗口

2.移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口大小

3.提供 Web 瀏覽器詳細信息的定位對象

4.提供用戶屏幕分辨率詳細信息的屏幕對象

5.對 cookie 的支持

6.IE 擴展了BOM，加入了ActiveXObject 類，可以通過 JavaScript 實例化 ActiveX 對象

由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window

BOM由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性

BOM缺乏標準, 是各個瀏覽器廠商根據(jù)DOM在各自瀏覽器上的實現(xiàn)（表現(xiàn)為不同瀏覽器定義有差別,實現(xiàn)方式不同）；JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C

BOM最初是Netscape瀏覽器標準的一部分

img

window對象是BOM的頂層(核心)對象，不是JS對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象。JavaScript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，由于BOM的window包含了document，window對象的屬性和方法是直接可以使用而且被感知的，因此可以直接使用window對象的document屬性，通過document屬性就可以訪問、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)。因為document對象又是DOM（Document Object Model）模型的根節(jié)點?？梢哉f，BOM包含了DOM(文檔對象模型)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。

BOM的組成

一、window對象

window對象是BOM的核心。它具有雙重角色，既是通過js訪問瀏覽器窗口的一個接口，又是一個Global（全局）對象。這意味著在網(wǎng)頁中定義的任何對象，變量和函數(shù)，都以window作為其global對象。

全局的window對象

JavaScript中的任何一個全局函數(shù)或變量都是window的屬性

window與self對象

self對象與window對象完全相同，self通常用于確認就是在當(dāng)前的窗體內(nèi)

window的子對象

1.document 對象

2.frames 對象

3.history 對象

4.location 對象

5.navigator 對象

6.screen 對象

window對象的函數(shù)和屬性索引

窗體控制

moveBy() 函數(shù)可相對窗口的當(dāng)前坐標把它移動指定的像素

moveTo() 函數(shù)可把窗口的左上角移動到一個指定的坐標

resizeBy() 函數(shù)用于根據(jù)指定的像素來調(diào)整窗口的大小

resizeTo() 函數(shù)用于把窗口大小調(diào)整為指定的寬度和高度

screenLeft 和 screenTop屬性返回窗口相對于屏幕的X和Y坐標

screenX 和 screenY 屬性返回窗口相對于屏幕的X和Y坐標

pageXOffset 和 pageYOffset 屬性設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 X 位置。pageYOffset 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 Y 位置

outerWidth 和 outerHeight 屬性設(shè)置或返回一個窗口的外部寬度(高度)，包括所有界面元素（如工具欄/滾動條）

窗體滾動軸控制

scrollBy() 函數(shù)可把內(nèi)容滾動指定的像素數(shù)

scrollTo() 函數(shù)可把內(nèi)容滾動到指定的坐標

提示：上面幾個函數(shù)的名字最后都帶有To或By，to是絕對的意思(從整體而言)，by是相對的意思(從原先的位置而言)

窗體焦點控制

focus() 函數(shù)可把鍵盤焦點給予一個窗口

blur() 函數(shù)可把鍵盤焦點從頂層窗口移開

新建窗體

open() 函數(shù)用于打開一個新的瀏覽器窗口或查找一個已命名的窗口

close() 函數(shù)用于關(guān)閉瀏覽器窗口

createPopup() 函數(shù)用來創(chuàng)建一個彈出窗口

opener 屬性是一個可讀可寫的屬性，可返回對創(chuàng)建該窗口的 Window 對象的引用

closed 屬性可返回一個布爾值，該值聲明了窗口是否已經(jīng)關(guān)閉

對話框

alert() 函數(shù)用于顯示帶有一條指定消息和一個 確認 按鈕的警告框

confirm() 函數(shù)用于顯示一個帶有指定消息和確認及取消按鈕的對話框

prompt() 函數(shù)用于顯示可提示用戶進行輸入的對話框

狀態(tài)欄

window.defaultStatus 屬性可設(shè)置或返回窗口狀態(tài)欄中的默認文本。該屬性可讀可寫

window.status 屬性可設(shè)置或返回窗口狀態(tài)欄中的文本

print() 函數(shù)用于打印當(dāng)前窗口的內(nèi)容

時間等待與間隔

setTimeout() 函數(shù)用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式

clearTimeout() 函數(shù)可取消由 setTimeout() 方法設(shè)置的 timeout

setInterval() 函數(shù)可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式

clearInterval() 函數(shù)可取消由 setInterval() 設(shè)置的 timeout

二、document對象

document對象用于表現(xiàn)HTML頁面當(dāng)前窗體的內(nèi)容，是window對象的屬性，包含了一個節(jié)點對象（該對象包含每個單獨頁面的所有HTML元素，這就是W3C的DOM對象，由于document對象內(nèi)容比較我，我們將在后面專門撰寫文章進行講解）。

三、frames對象

frames對象用于表現(xiàn)HTML頁面當(dāng)前窗體的中的框架集合，是window對象的屬性。如果頁面使用框架，將產(chǎn)生一個框架集合frames，在集合中可用數(shù)字(從0開始，從左到右，逐行索引)或名字索引框架。

window：當(dāng)前框架

self 屬性可返回對窗口自身的只讀引用

Top 屬性返回當(dāng)前窗口的最頂層瀏覽器窗口

parent 屬性返回當(dāng)前窗口的父窗口

四、history對象

history對象用于窗體中的導(dǎo)航，是window對象的屬性，瀏覽者通?？梢允褂脼g覽器的前進與后退按鈕訪問曾經(jīng)瀏覽過的頁面。JavaScript的history對象記錄了用戶曾經(jīng)瀏覽過的頁面，并可以實現(xiàn)瀏覽器前進與后退相似的導(dǎo)航功能；可以通過back函數(shù)后退一個頁面，forward函數(shù)前進一個頁面，或者使用go函數(shù)任意后退或前進頁面，還可以通過length屬性查看history對象中存儲的頁面數(shù)。

go() 函數(shù)可加載歷史列表中的某個具體的頁面

back() 函數(shù)可加載歷史列表中的前一個 URL（如果存在）

forward() 函數(shù)可加載歷史列表中的下一個 URL

length 屬性聲明了瀏覽器歷史列表中的元素數(shù)量

五、location****對象

location對象用于獲取或設(shè)置窗體的URL并可以用于解析URL。它既是window對象的屬性又是document對象的屬性，包含8個屬性，其中7個都是當(dāng)前窗體的URL的一部分，剩下的也是最重要的一個是href屬性，代表當(dāng)前窗體的URL。8個屬性都是可讀寫的，但是只有href與hash的寫才有意義。

assign() 函數(shù)加載一個新的文檔

replace() 函數(shù)可用一個新文檔取代當(dāng)前文檔

reload() 函數(shù)用于刷新當(dāng)前文檔

hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）

host 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的主機名稱和端口號

hostname 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的主機名

href 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前顯示的文檔的完整 URL

pathname 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的路徑部分

port 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的端口部分

protocol 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的協(xié)議

search 屬性是一個可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的查詢部分（問號 ? 之后的部分）

navigator對象

navigator對象通常用于檢測瀏覽器與操作系統(tǒng)的版本，是window對象的屬性。由于navigator沒有統(tǒng)一的標準，因此各個瀏覽器都有自己不同的navigator版本。常用的navigator函數(shù)和屬性有：

taintEnabled() 函數(shù)可返回一個布爾值，該值聲明了當(dāng)前瀏覽器是否啟用了 data tainting

appCodeName 屬性是一個只讀字符串，聲明了瀏覽器的代碼名

appName 屬性可返回瀏覽器的名稱

appVersion 屬性可返回瀏覽器的平臺和版本信息。該屬性是一個只讀的字符串

cookieEnabled 屬性可返回一個布爾值，如果瀏覽器啟用了 cookie，該屬性值為 true。如果禁用了 cookie，則值為 false

platform 屬性是一個只讀的字符串，聲明了運行瀏覽器的操作系統(tǒng)和（或）硬件平臺

userAgent 屬性是一個只讀的字符串，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值

javaEnabled() 函數(shù)可返回一個布爾值，該值指示瀏覽器是否支持并啟用了 Java。如果是，則返回 true，否則返回 false

screen對象

screen對象用于獲取用戶的屏幕信息，是window對象的屬性。

width 屬性聲明了顯示瀏覽器的屏幕的寬度，以像素計

height 屬性聲明了顯示瀏覽器的屏幕的高度，以像素計

availWidth 屬性聲明了顯示瀏覽器的屏幕的可用寬度，以像素計。在 Windows 這樣的操作系統(tǒng)中，這個可用高度不包括分配給半永久特性（如屏幕底部的任務(wù)欄）的垂直空間

availHeight 屬性聲明了顯示瀏覽器的屏幕的可用高度，以像素計。在 Windows 這樣的操作系統(tǒng)中，這個可用高度不包括分配給半永久特性（如屏幕底部的任務(wù)欄）的垂直空間

colorDepth 屬性返回目標設(shè)備或緩沖器上的調(diào)色板的比特深度

pixelDepth 屬性返回顯示屏幕的顏色分辨率（比特每像素）