0.前言
最近學(xué)習了JavaScript中的BOM和DOM，感覺就像兩大護法，為JavaScript保駕護航，今天就來分享一下這二者之一———BOM。
1.BOM簡介
BOM：瀏覽器對象模型(Browser Object Model),是操作瀏覽器和屏幕的對象集合。通過window全局對象來使用它們。
??此時可以發(fā)現(xiàn)，我們過去定義的變量其實就是給window這個全局對象添加的屬性；過去聲明的函數(shù)其實就是給window這個全局對象添加的方法。
??通過上面的結(jié)構(gòu)圖可以發(fā)現(xiàn)window下面有很多屬性，對象。尤其是在第二行：
- window.document：表示的是當前的文檔（頁面），他的屬性和方法屬于DOM范圍，我們下節(jié)分享。
- window.frames：表示當前頁面所用的所有框架的集合
- window.navigator：它是用來描述瀏覽器及其功能的對象。
- window.screen：它是用來描述瀏覽器以外的環(huán)境，例如屏幕的寬高，分辨率之類的。
- window.location：是對瀏覽器頁面進行的操作。如刷新、加載之類的。
-
window.history：是對瀏覽器訪問的歷史記錄，足跡之類進行的操作。
??上面的這是六種方法中，今天著重說兩個：loaction和history。
2.正文
這樣干說沒意思，我們以案例說話。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM簡介</title>
</head>
<body>
<button onclick="wh()">跳轉(zhuǎn)到紅色界面</button>
<button onclick="refresh()">刷新界面</button>
<button onclick="ass()">加載紅色界面</button>
<button onclick="goBack()">上一頁</button>
<button onclick="goForward()">下一頁</button>
<button onclick="goPage()">直接跳到歷史記錄中的黃色界面</button>
<script type="text/javascript">
</script>
</body>
</html>
首先搭好界面，第一部分：
window.location
在代碼中的javascript中添加下面下面代碼：
console.log(window.location.href);
function wh() {
alert("瞅你咋地");
window.location.href = "";
}
function refresh() {
window.location.reload();
}
function ass() {
// window.location.assign("red.html");
window.location.replace("red.html");
}
這段代碼用了幾個location方法：
（1）href：表示的是當前頁面所在的本地地址在瀏覽器上顯示出來了。
（2）reload()：表示的是刷新界面；
（3）reload(true)：也表示的是刷新界面，但是刷新的界面，不會被緩存。
（4）assign()：加載接的界面，可以返回上一頁。
（5）replace()：也是加載新的界面，但是不會在歷史記錄中留下痕跡,就是說返回不了上一頁。
注意：更改location中的href和調(diào)用assgin()會清空歷史記錄。
第二部分：window.history
function goBack(){
window.history.back();
}
function goForward(){
window.history.forward();
}
function goPage() {
window.history.go(2);
}
（1）length：表示瀏覽記錄的個數(shù)
（2）back()：上一頁
（3）forward()：下一頁
（4）go(num)：直接跳到指定的歷史記錄，如果num小于0會跳到當前界面之前的num的絕對值個記錄。如果num大于0，會跳到當前界面之后的num值記錄。
注意:如果想用go(num)進行頁面的跳轉(zhuǎn)，必須在瀏覽器中有歷史記錄，否則是跳轉(zhuǎn)不到指定的界面的。
