BOM是什么
BOM（Browser Object Model）是指瀏覽器對象模型年扩，是用于描述這種對象與對象之間的層次關(guān)系的模型待侵，瀏覽器對象模型提供了獨立于內(nèi)容的胶滋，可以與瀏覽李窗口進(jìn)行互動的對象結(jié)構(gòu)。
BOM由多個對象組成皆的，其中代表瀏覽器窗口的window對象是BOM的頂層對象覆履，其他對象都是該對象的子對象。
BOM的核心
window
BOM的核心是window對象费薄，它表示瀏覽器的一個實例硝全。
在瀏覽器中，window對象既是JavaScript訪問瀏覽器窗口的一個接口楞抡，又是ECMAscript規(guī)定的Global對象伟众，這就意味著在網(wǎng)頁中定義的任意變量，函數(shù)召廷，對象都是以window作為Global對象凳厢。
所有在全局作用域中聲明的變量、函數(shù)竞慢、對象都活作為window的屬性和方法先紫。
var age = 18;
function ages(){
console.log(age);
}
console.log(window.age); //18
window.ages(); //18
window對象屬性
-
window.innerHeight和window.innerWidth
這兩個屬性返回網(wǎng)頁的css布局占據(jù)的瀏覽器窗口的寬度和高度，單位是像素筹煮。
當(dāng)用戶放大網(wǎng)頁遮精，這兩個屬性會變小
注意，這兩個屬性值包括滾動條的高度和寬度败潦。
-
scrollX和scrollY
-
scrollX：滾動條橫向偏移 -
scrollY：滾動條縱向偏移
-
這兩個值隨著滾動位置變化而變化
-
scrollTo本冲、scrollBy准脂、scroll
scrollTo和scroll方法改變滾動條的位置到指定坐標(biāo)
window.scrollTo(0,200); //滾動條移動到200px處
兩個參數(shù)分別是水平、垂直方向偏移
scrollBy可以相對向前位置移動滾動條眼俊，而不是移動絕對位置
window.scrollBy(0.50); //滾動條向下移動50px
-
window.frames
window.frames返回一個類似數(shù)組的對象意狠，成員為頁面內(nèi)的所有框架粟关，包括frame元素和iframe元素疮胖。
window.frames的每個成員對應(yīng)的框架內(nèi)的窗口（即框架的window對象），獲取每個框架的DOM樹闷板，需要使用window.frames[0].document澎灸。
var iframe = window.getElementsByTagName("iframe")[0];
var iframeTitle = iframe.contentWindow.title;
上面代碼用于獲取框架頁面的標(biāo)題。
iframe元素遵守同源策略遮晚，只有當(dāng)父頁面與框架頁面來自同一個域名性昭，兩者之間才可以用腳本通信，否則只有使用window.postMessage方法县遣。
在iframe框架內(nèi)部糜颠，使用window.parent指向父頁面。
-
navigator
window對象的navigator屬性萧求，指向一個包含瀏覽器相關(guān)信息的對象其兴。
navigator.userAgent屬性返回瀏覽器的User-Agent字符串，用來表示瀏覽器的種類夸政。
console.log(window.navigator.userAgent); //"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36"
通過userAgent屬性識別瀏覽器元旬，不是一個好辦法，因為必須考慮所有的情況（不同的瀏覽器守问，不同的版本）匀归，非常麻煩，而且無法保證未來的適用性耗帕，各種上網(wǎng)設(shè)備層出不窮穆端，很難列舉，所以現(xiàn)在一般不再識別瀏覽器了仿便，而是使用“功能識別”方法体啰，即逐一測試當(dāng)前瀏覽器是否支持要用到的JavaScript功能。
-
screen
screen對象包含了顯示設(shè)備的信息
//顯示設(shè)備的高度探越，單位是像素
screen.height
//顯示設(shè)備的寬度狡赐，單位是像素
screen.width
一般使用上面兩個屬性，了解設(shè)備的分辨率钦幔。除非調(diào)整顯示器的分辨率或者更換設(shè)備枕屉，否則這兩個值可以看做常量，不會發(fā)生變化鲤氢。
顯示器的分辨率與瀏覽器的設(shè)置無關(guān)搀擂，縮放網(wǎng)頁并不會改變分辨率西潘。
-
window.getComputedStyle
getComputedStyle是一個可以獲取搶錢元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象（[object CSSStyleDeclaration]）
//如果沒有偽類則不設(shè)置
var style = window.getComputedStyle("元素"哨颂，“偽類”)喷市；
var div = document.querySelector(".test");
console.log(getComputedStyle(div));
currentStyle
這個是低版本IE的實現(xiàn)方案，我們可以寫個兼容的方式
element.currentStyle ? element.currentStyle : window.getComputedStyle(element);
-
URL編碼和解碼
JavaScript提供了兩種URL的編碼/解碼方式
-
encodeURI()/decodeURI() -
encodeURIComponent()/decodeURIComponent()
encodeURI()和encodeURIComponent()的區(qū)別：
encodeURI()不會對下列字符編碼
1. ASCII字母
2. 數(shù)字
3. ~!@#$&()+:/,;?+'
encodeURIComponent()方法不會對下列字符編碼
1. ASCII字母
2. 數(shù)字
3. ~!*()'
從上面可以看出威恼，encodeURIComponent()方法比encodeURI()方法編碼范圍大品姓。
實際例子來說，encodeURIComponent()會把http://編碼成http%3A%2F%2F箫措，而encodeURI不會
- alert()腹备、prompt()、confirm()（不常用）
alert()斤蔓、prompt()植酥、confirm()都是瀏覽器用來與用戶互動的方法。它們會彈出不同的對話框弦牡，要求用戶做出回應(yīng)友驮。
需要注意的是，alert()驾锰、prompt()卸留、confirm()這三個方法彈出的對話框，都是瀏覽器統(tǒng)一規(guī)定的樣式稻据，是無法定制的艾猜。（這是現(xiàn)在不常用的原因）
alert方法彈出的對話框，只有一個“確定”按鈕捻悯，一般用來通知用戶的某些信息匆赃。用戶只有點擊“確定”按鈕，對話框才會消失今缚。在對話框彈出期間算柳，瀏覽器窗口處于凍結(jié)狀態(tài)，如果不點“確定”按鈕姓言，用戶什么也干不了瞬项。
prompt方法彈出的對話框，在提示文字的下方還有一個輸入框何荚，要求用戶輸入信息囱淋，并有“確定”和“取消”兩個按鈕，一般用來獲取用戶輸入的數(shù)據(jù)餐塘。返回值是一個字符串（有可能為空）或者null妥衣，具體分為三種情況：
- 用戶輸入信息，并點擊“確定”，則用戶輸入的信息就是返回值
- 用戶沒有輸入信息税手，直接點擊“確定”蜂筹，則輸入框的默認(rèn)值就是返回值
- 用戶點擊了“取消”（或者按了Esc按鈕），返回值是null
confirm方法彈出的對話框芦倒，除了提示信息之外艺挪，只有“確定”和“取消”兩個按鈕，一般用來征詢用戶的意見兵扬。返回值是一個布爾值麻裳，如果用戶點擊“確定”，則返回true周霉，如果用戶點擊“取消”掂器，則返回false。
//alert
alert("這是一個彈出層");
//prompt
var result = prompt("您的年齡俱箱？", 18); //18是設(shè)置的默認(rèn)值，默認(rèn)顯示
//confirm
var results = confirm("吃了嗎灭必？");
