BOM

1 BOM的概念

BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。

我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，

比如：刷新瀏覽器、後退、前進、在瀏覽器中輸入URL等

2 BOM的頂級對象window

window是瀏覽器的頂級對象，當調用window下的屬性和方法時，可以省略window

注意：window下一個特殊的屬性 window.name

3 對話框

alert()

prompt()

confirm()

4 頁面加載事件

onload
window.onload = function () {
  // 當頁面加載完成執行
  // 當頁面完全加載所有內容（包括圖像、腳本文件、CSS 文件等）執行
}
onunload
window.onunload = function () {
  // 當用戶退出頁面時執行
}

5 定時器

5.1 setTimeout()和clearTimeout()

在指定的毫秒數到達之後執行指定的函數，只執行一次

// 創建一個定時器，1000毫秒後執行，返回定時器的標示

var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定時器的執行

clearTimeout(timerId);

5.2 setInterval()和clearInterval()

定時調用的函數，可以按照給定的時間(單位毫秒)週期調用函數

// 創建一個定時器，每隔1秒調用一次

var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定時器的執行

clearInterval(timerId);

6 location對象

location對象是window對象下的一個屬性，使用的時候可以省略window對象

location可以獲取或者設置瀏覽器地址欄的URL

6.1 URL

統一資源定位符 (Uniform Resource Locator, URL)

URL的組成

scheme://host:port/path?query#fragment

scheme:通信協議

常用的http,ftp,maito等

host:主機

服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。

port:端口號

整數，可選，省略時使用方案的默認端口，如http的默認端口爲80。

path:路徑

由零或多個'/'符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址。

query:查詢

可選，用於給動態網頁傳遞參數，可有多個參數，用'&'符號隔開，每個參數的名和值用'='符號隔開。例如：name=zs

fragment:信息片斷

字符串，錨點.

6.2 location有哪些成員？

使用chrome的控制檯查看

查MDN

[MDN](https://developer.mozilla.org/zh-CN/)

成員

assign()/reload()/replace()

hash/host/hostname/search/href……

6.3 案例

解析URL中的query，並返回對象的形式

function getQuery(queryStr) {
  var query = {};
  if (queryStr.indexOf('?') > -1) {
    var index = queryStr.indexOf('?');
    queryStr = queryStr.substr(index + 1);
    var array = queryStr.split('&');
    for (var i = 0; i < array.length; i++) {
      var tmpArr = array[i].split('=');
      if (tmpArr.length === 2) {
        query[tmpArr[0]] = tmpArr[1];
      }
    }
  }
  return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

7 history對象

back()

forward()

go()

8 navigator對象

userAgent

通過userAgent可以判斷用戶瀏覽器的類型

platform

通過platform可以判斷瀏覽器所在的系統平臺類型.