BOM（Browser Object Model），中文名稱“瀏覽器對象模型”。和DOM相對應(yīng)跷究，DOM提供的是操作文檔元素的接口，那么BOM提供的就是操作瀏覽器行為的接口敲霍。JavaScript的基礎(chǔ)中俊马，除了基本語法和DOM外丁存，BOM也是十分重要的。本節(jié)主要學(xué)習(xí)BOM的基本操作柴我，了解BOM有哪些特點解寝。
概述
BOM讓我們可以通過JavaScript來操作瀏覽器，為此BOM提供了一些基本的對象來達成這個目標艘儒。
- window 代表瀏覽器的整個窗口聋伦，也是全局對象，之后的對象可以直接使用界睁，也可以作為window的方法來調(diào)用觉增。
- navigator 代表瀏覽器的信息，可用于判斷瀏覽器的類型翻斟。（Edg Firefox Chrome等）
- location 代表瀏覽器的地址欄信息逾礁，用于獲取地址或者讓瀏覽器跳轉(zhuǎn)頁面
- history 代表瀏覽器的歷史，用于進行瀏覽器頁面的前后跳轉(zhuǎn)访惜。若關(guān)閉瀏覽器后再打開嘹履，則前一次訪問的歷史會被清除。
- screen 代表用戶屏幕信息债热，可以獲取到用戶的顯示器相關(guān)的信息植捎。
1.navigator
該對象最主要的作用是獲取瀏覽器的信息，識別不同類型的瀏覽器阳柔。歷史原因焰枢，該對象中的大部分方法都不能幫助我們識別瀏覽器，目前我們一般只使用一個方法userAgent舌剂。
該方法的返回值是一個字符串济锄，包含了瀏覽器相關(guān)的信息，簡稱UA霍转。不同瀏覽器的UA都是不同的荐绝，因此它可以作為識別瀏覽器的依據(jù)。
let ua = navigator.userAgent;
console.log("當前瀏覽器的UA是" + ua);//控制臺會打印出瀏覽器相關(guān)信息避消，可以用不同瀏覽器查看低滩，發(fā)現(xiàn)都是不一樣的。
UA中一般會包含有瀏覽器的名稱岩喷，只要匹配到這些名稱我們就可以實現(xiàn)簡單的瀏覽器判別恕沫。要匹配字符串中的特定字符片段，使用正則表達式是最好的纱意。
if (/Firefox/i.test(ua)) {
alert("火狐瀏覽器");
}else if (/chrome/i.test(ua)) {
alert("chrome瀏覽器");
}else if (/msie/i.test(ua)) {
alert("IE瀏覽器");
//碎碎念婶溯，連微軟都要停止支持IE瀏覽器了（）
2.location
location中包含有瀏覽器瀏覽的網(wǎng)頁的地址信息，我們依據(jù)這個特性可以實現(xiàn)瀏覽器的跳轉(zhuǎn)。location對象包含一個常用的屬性和三個常用的方法迄委。
- 屬性 href
console.log(location.href);//打印頁面的URL
location.http://頁面將會自動跳轉(zhuǎn)到百度首頁
- 方法一：
location.assign(str);//效果和location.href是一樣的褐筛，str是字符串形式的要跳轉(zhuǎn)頁面的地址。
location.assign("https://www.baidu.com");
- 方法二：
location.reload();//重新加載當前頁面叙身，括號中傳入?yún)?shù)true還會清除緩存并且重新加載頁面
- 方法三：
location.replace(str)//也是跳轉(zhuǎn)頁面渔扎，和assign不同之處在于會直接替代當前頁面并且不會生成history。
3.history
瀏覽器的歷史信轿。一般的瀏覽器的左上角的位置都有一個這樣的功能區(qū)域晃痴。
點擊它們我們可以實現(xiàn)返回上一個或者下一個我們之前瀏覽過的頁面，history對象也可以實現(xiàn)這樣的功能虏两。這里也主要了解history對象的一個屬性和三個常用方法愧旦。
- 屬性：
history.length//獲取瀏覽器歷史中URL的數(shù)量世剖，可以理解為訪問的頁面數(shù)量定罢。
這個數(shù)量是單次有效的，也就是說如果中途我們關(guān)閉了瀏覽器再打開旁瘫。這個數(shù)值會被重置為1祖凫。
- 方法一：
history.back();//返回上個訪問的頁面 類似瀏覽器的 回退 按鈕
- 方法二：
history.forward();//跳轉(zhuǎn)到下一個訪問到的頁面，類似瀏覽器的 前進 按鈕
- 方法三：
history.go();//頁面跳轉(zhuǎn)
該方法需要傳入一個整數(shù)作為參數(shù)酬凳，大于零表示向前跳轉(zhuǎn)多少個頁面惠况，小于零表示回退多少個頁面。輸入零則表示重新加載當前頁面宁仔。
定時器
我們在瀏覽一些網(wǎng)站特別是電商網(wǎng)站的時候稠屠，經(jīng)常能看見頁面的某個盒子中的圖片，間隔一定的時間就會切換為其他的圖片翎苫。這就利用了定時器的功能权埠。常見的使用定時器的方法主要有setInterval()和setTimeout()。
setInterval()
該方法的的作用是調(diào)用一段代碼煎谍，循環(huán)執(zhí)行攘蔽，兩次執(zhí)行之間會有一定的時間間隔。方法需要傳入兩個參數(shù)呐粘。
- 參數(shù)一 回調(diào)函數(shù)满俗，內(nèi)部封裝需要循環(huán)執(zhí)行的代碼。
- 參數(shù)二 時間間隔作岖，這里的單位為毫秒唆垃。
例子，實現(xiàn)一個每隔一秒加一的功能
let num = 0;
setInterval(fn, 1000);
function fn() {
num++;
console.log(num);
};
控制臺每隔一秒就會打印出一個相比上次結(jié)果加一的數(shù)字痘儡。
setTimeout()
該方法會調(diào)用一段代碼降盹，這段代碼不會立即執(zhí)行，而是在等待一定的時間后開始執(zhí)行。參數(shù)和setInterval（）一樣有兩個蓄坏。
- 參數(shù)一 回調(diào)函數(shù)价捧，內(nèi)部封裝代碼。
- 參數(shù)二 間隔的時間涡戳，代碼等待執(zhí)行的時間结蟋。
例子二鳄，讓頁面中的一個元素在5秒后消失做修。
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="box"></div>
<script>
let box = document.getElementById("box");
setTimeout(fn, 5000);
function fn() {
box.style.display = "none";
}
</script>
</body>
fn中的代碼在頁面加載完成的5秒之后才會被執(zhí)行。
清除定時器
實際開發(fā)中顿颅，我們并不希望定時器一直存在恍涂，尤其是setInterval這種定時器宝惰。所以我們需要清除定時器，只需要將set改成clear即可再沧。
定時器的返回值是一個數(shù)字尼夺，它是定時器的唯一標識。我們將這個返回值賦給一個變量炒瘸，然后使用
clearInterval(變量名)
clearTimeout(變量名)
這樣定時器就會被清除淤堵。
總結(jié)
利用定時器的這些功能，改進圖片切換的功能顷扩。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片切換 定時器版本</title>
<style>
#img {
width: 800px;
height: 500px;
margin: 100px auto;
text-align: center;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="img">
<img src="image/img1.jpg" alt="">
<button id="start">開始</button>
<button id="stop">停止</button>
</div>
<script>
let timer;
let img = document.getElementsByTagName("img")[0];
let btn01 = document.getElementById("start");
let btn02 = document.getElementById("stop");
let imgArray = ["image/img1.jpg","image/img2.jpg", "image/img3.jpg", "image/img4.jpg"];
let index = 0;
btn01.onclick = function () {
clearInterval(timer);//防止重復(fù)生成定時器
timer = setInterval(function () {
img.src = imgArray[index];
index++
if (index == imgArray.length) {
index = 0
}
},1000)
}
btn02.onclick = function () {
clearInterval(timer);
}
</script>
</body>
</html>
