饑人谷進階學習第 13 天
BOM
瀏覽器對象模型，是用于描述這種對象與對象之間層次關系的模型，瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象哦都是該對象的子對象
window
BOM 的核心是window對象，它表示瀏覽器的一個實例。在瀏覽器中，即是javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象，這就意味著在網頁中定義的任意變量、函數、對象都是以window作為Global對象。
所有在全局作用域中聲明的變量、函數、對象都會作為window的屬性和方法
window屬性
window.innerHeight、window.innerWidth
兩個屬性返回網頁的CSS布局占據的瀏覽器窗口的高度和寬度，單位為像素。很顯然，當用戶放大網頁的時候（比如將網頁從100%的大小放大為200%），這兩個屬性會變小。
scrollX、scrollY
滾動條橫向偏移
滾動條縱向偏移
這兩個值隨著滾動位置變化而變化
scrollTo、scrollBy、scroll
通過方法scrollTo或者scroll改變滾動條位置到指定坐標
window.scrollTo(0,300); // 滾動條移動到300px處
兩個參數分別是水平、垂直方向偏移
scrollBy可以相對于當前位置移動滾動條，不是移動到絕對位置
scrollBy(0,100); // 滾動條下移100px
window.frames
返回一個類似數組的對象，成員為頁面內的所有框架，包括frame元素和iframe元素。window.frames的每個成員對應的是框架內的窗口（即框架的window對象），獲取每個框架的DOM樹，需要使用window.frames[0].document。
var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;
用于獲取框架頁面的標題
iframe元素遵守同源政策，只有當父頁面與框架頁面來自同一個域名，兩者之間才可以用腳本通信，否則只有使用window.postMessage方法。
在iframe框架內部，使用window.parent指向父頁面。
navigator
Window對象的navigator屬性，指向一個包含瀏覽器相關信息的對象。
例如：navigator.userAgent屬性返回瀏覽器的User-Agent字符串，用來標示瀏覽器的種類。但通過此屬性識別瀏覽器不是一個好方法（必須考慮所有情況:不同瀏覽器，不同版本，很麻煩無法保證未來的適用性）
現在一般不再識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當前瀏覽器是否支持要用到的JavaScript功能。
screen
此對象包含了顯示設備的信息
screen.height // 顯示設備的高度(像素)
screen.width // 顯示設備的寬度(像素)
一般使用以上兩個屬性了解設備的分辨率。除調整顯示器的分辨率，否則這兩個值可以看作常量。
window.getComputedStyle
可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclaration])
var style = window.getComputedStyle("元素", "偽類");
var div = document.getElementById('test'); // 沒有偽類
console.log(getComputedStyle(div).width);
currentStyle
低版本IE的實現方案，可以寫個兼容的方式
element.currentStyle ?
element.currentStyle : window.getComputedStyle(element, null)
URL的編碼/解碼方法
JS提供四個URL的編碼/解碼方法
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
區別
encodeURI方法不會對下列字符編碼
1. ASCII字母
2. 數字
3. ~!@#$&*()=:/,;?+'
encodeURIComponent方法(范圍較大)不會對下列字符編碼
1. ASCII字母
2. 數字
3. ~!*()'
實際例子來說，encodeURIComponent會把 http:// 編碼成 http%3A%2F%2F 而encodeURI卻不會。
alert()、prompt()、confirm()
瀏覽器用來與用戶互動的方法。會彈出不同的對話框，要求用戶做出回應。（不常用）
這三個方法彈出的對話框，都是瀏覽器統一規定的式樣，是無法定制的。
alert方法彈出的對話框，只有一個“確定”按鈕，往往用來通知用戶某些信息。用戶只有點擊“確定”按鈕，對話框才會消失。在對話框彈出期間，瀏覽器窗口處于凍結狀態，如果不點“確定”按鈕，用戶什么也干不了。
prompt方法彈出的對話框，在提示文字的下方，還有一個輸入框，要求用戶輸入信息，并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數據。返回值是一個字符串（有可能為空）或者null，具體分成三種情況。
- 用戶輸入信息，并點擊“確定”，則用戶輸入的信息就是返回值。
- 用戶沒有輸入信息，直接點擊“確定”，則輸入框的默認值就是返回值。
- 用戶點擊了“取消”（或者按了Escape按鈕），則返回值是null。
// 格式
var result = prompt(text[, default]);
// 實例
var result = prompt('您的年齡？', 25)
prompt方法的第二個參數是可選的，但是如果不提供的話，IE瀏覽器會在輸入框中顯示undefined。因此，最好總是提供第二個參數，作為輸入框的默認值。
confirm方法彈出的對話框，除了提示信息之外，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶的意見。
// 格式
var result = confirm(message);
confirm方法返回一個布爾值，如果用戶點擊“確定”，則返回true；如果用戶點擊“取消”，則返回false。
