幾乎所有的瀏覽器都內(nèi)嵌了javaScript引擎，使得javaScript語(yǔ)言能夠在瀏覽器環(huán)境下運(yùn)行。 那么，如果要使用javaScript語(yǔ)言來(lái)操作瀏覽器中的各種對(duì)象，就需要使用BOM模型與DOM模型。
- 瀏覽器對(duì)象模型BOM（Browser Object Model）： 提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。
-
文檔對(duì)象模型DOM（Document Object Model）： 定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。
BOM模型DOM模型示意圖.png
3.1 BOM編程【W(wǎng)indows對(duì)象】
| 方法名稱 | 說(shuō)明 |
|---|---|
| alert() | 顯示帶有一個(gè)提示信息和一個(gè)確定按鈕的警示框 |
| prompt() | 顯示可提示用戶輸入的對(duì)話框 |
| confirm() | 顯示一個(gè)帶有提示信息、確定和取消按鈕的對(duì)話框 |
| close() | 關(guān)閉瀏覽器窗口 |
| open() | 打開(kāi)一個(gè)新的瀏覽器窗口，加載給定的文檔 |
| setTimeout() | 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式（一次調(diào)用） |
| clearTimeout() | 取消定時(shí)器 |
| setInterval() | 按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或表達(dá)式 |
| clearInterval() | 取消定時(shí)器 |
| screenLeft | 獲取瀏覽器相對(duì)于屏幕左上角的x坐標(biāo) |
| screenTop | 獲取瀏覽器相對(duì)于屏幕左上角的y坐標(biāo) |
-
alert()對(duì)話框
alert()方法：在頁(yè)面上彈出一個(gè)只有確定按鈕的對(duì)話框
window.alert('hello');
window作為頂層對(duì)象，可以省略
alert('hello');
-
confirm()對(duì)話框
alert()方法：在頁(yè)面上彈出一個(gè)有確定和取消按鈕的對(duì)話框。此對(duì)話框返回一個(gè)布爾值（點(diǎn)擊 “確定” 按鈕，返回true； 點(diǎn)擊 “取消” 按鈕，返回false）
if(confirm('確定要?jiǎng)h除嗎')){
console.log('刪除');
}else{
console.log('不刪除');
}
-
open()與close()方法
open()方法：打開(kāi)一個(gè)瀏覽器窗口。
close()方法：關(guān)閉一個(gè)瀏覽器窗口。
<input type="button" value="打開(kāi)百度" onclick="openBaidu()">
<input type="button" value="關(guān)閉百度" onclick="closeBaidu()">
//聲明一個(gè)引用
let obj = null;
function openBaidu(){
//打開(kāi)百度窗口，并讓obj指向百度窗口
obj = window.open('http://www.baidu.com');
//obj = open('http://www.baidu.com'); //window可以省略
}
function closeBaidu(){
//關(guān)閉百度窗口
obj.close();
}
【示例】
<!-- 添加點(diǎn)擊事件（監(jiān)聽(tīng)按鈕行為） -->
<button onclick="toBilibili()">打開(kāi)</button>
<button onclick="closeBilibili()">關(guān)閉</button>
// ***window對(duì)象***
// window可省略
window.alert('ok')
window.prompt('請(qǐng)輸入密碼:')；
// let mima = window.prompt('請(qǐng)輸入密碼:')
// console.log(mima)<===此處作用是確認(rèn)返回值===>
window.confirm('確認(rèn)設(shè)置此密碼嗎？')；
// let con = window.confirm('確認(rèn)設(shè)置此密碼嗎？')
// console.log(con)<===此處作用是確認(rèn)返回值===>
let obj = null；
function toBilibili(){
obj = window.open('https://www.bilibili.com/')
}
function closeBilibili(){
// window.close('https://www.bilibili.com/') 此操作會(huì)使頁(yè)面自己關(guān)閉
obj.close()；
}
-
setTimeout()定時(shí)器
setTimeout()函數(shù)能夠在指定的時(shí)間間隔后，調(diào)用一個(gè)函數(shù)（此函數(shù)稱為回調(diào)函數(shù)）。
注意：setTimeout()在指定的時(shí)間間隔后，只調(diào)用一次。
setTimeout(function(){
console.log('hello，3秒到了');
},3000);
前面學(xué)過(guò)，函數(shù)也是一個(gè)對(duì)象，也可以使用一個(gè)引用來(lái)指向它。所以，還可以有如下的寫(xiě)法
function callback(){
console.log('hello，3秒到了');
}
setTimeout(callback,3000);
或者：
let callback = function(){
console.log('hello，3秒到了');
}
setTimeout(callback,3000);
-
setInterval()定時(shí)器
setInterval()函數(shù)能夠在指定的時(shí)間間隔后，調(diào)用一個(gè)函數(shù)（此函數(shù)稱為回調(diào)函數(shù)）。
注意：setInterval()在指定的時(shí)間間隔后，可以調(diào)用無(wú)限多次。
let callback = function(){
console.log('hello，3秒到了');
}
setInterval(callback,3000);
3.2 BOM編程【Location對(duì)象】
location用于獲取或設(shè)置地址欄中的url，并且提供若干方法用于刷新或跳轉(zhuǎn)等。 location.reload() 頁(yè)面重新加載（相當(dāng)于刷新按鈕） location.href 返回或設(shè)置完整的url
<button onclick="doReload()">刷新</button>
<button onclick="toBaidu()">跳轉(zhuǎn)百度</button>
<script>
function doReload(){
location.reload();
}
function toBaidu(){
location.;
}
</script>
3.3 BOM編程【History對(duì)象】
history對(duì)象記錄了用戶曾經(jīng)瀏覽過(guò)的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。history對(duì)象就是訪問(wèn)后的URL。
- history.back() 加載history列表中的前一個(gè)URL，也就是后退。
- history.forward() 加載history列表中的下一個(gè)URL，也就是前進(jìn)。
-
history.go() 加載history列表中的某一個(gè)URL。
0：當(dāng)前； -1：相當(dāng)于back()； 1：相當(dāng)于forward()
// 創(chuàng)建兩個(gè)html文件，第一個(gè)html文件中書(shū)寫(xiě)：
<a href="b.html">跳轉(zhuǎn)b頁(yè)面</a>
// 第二個(gè)html文件中書(shū)寫(xiě)：
<a href="javascript:history.go(-1)">回退</a>
