知識(shí)整理——瀏覽器對(duì)象模型

mayaohua 發(fā)布于2019-08-22 16:04 / 2946人閱讀

摘要：瀏覽器對(duì)象模型什么是瀏覽器對(duì)象模型瀏覽器對(duì)象模型瀏覽器模型提供了獨(dú)立于內(nèi)容的可以與瀏覽器窗口進(jìn)行滑動(dòng)的對(duì)象結(jié)構(gòu)，就是瀏覽器提供的其主要對(duì)象有對(duì)象的核心，是訪問瀏覽器的接口，也是規(guī)定的對(duì)象對(duì)象提供當(dāng)前窗口中的加載的文檔有關(guān)的信息和一些導(dǎo)航功能

瀏覽器對(duì)象模型 什么是瀏覽器對(duì)象模型

BOM ：Browser Object Model（瀏覽器對(duì)象模型）,瀏覽器模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行滑動(dòng)的對(duì)象結(jié)構(gòu)，就是瀏覽器提供的 API

其主要對(duì)象有：
1、window 對(duì)象——BOM 的核心，是 js 訪問瀏覽器的接口，也是 ES 規(guī)定的 Global 對(duì)象
2、location 對(duì)象：提供當(dāng)前窗口中的加載的文檔有關(guān)的信息和一些導(dǎo)航功能。既是 window 對(duì)象屬性，也是 document 的對(duì)象屬性
3、navigation 對(duì)象：獲取瀏覽器的系統(tǒng)信息
4、screen 對(duì)象：用來表示瀏覽器窗口外部的顯示器的信息等
5、hitory 對(duì)象：保存用戶上網(wǎng)的歷史信息

Window 對(duì)象

windows 對(duì)象是整個(gè)瀏覽器對(duì)象模型的核心，其扮演著既是接口又是全局對(duì)象的角色

window 對(duì)象的屬性和方法

屬性	說明
alert()	系統(tǒng)警告對(duì)話框，接收字符串參數(shù)并顯示
confirm()	系統(tǒng)確認(rèn)對(duì)話框，可提供確認(rèn)或取消兩種事件
prompt()	提示對(duì)話框，可對(duì)用戶展示確認(rèn)、取消事件外，還可提供文本域
open()	可導(dǎo)航至特定的 url，又可打開一個(gè)新的瀏覽器窗口window.open(要加載的url, 窗口目標(biāo), 一個(gè)特定字符串, 一個(gè)新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值)
onerror()	事件處理程序，當(dāng)未捕獲的異常傳播到調(diào)用棧上時(shí)就會(huì)調(diào)用它，并把錯(cuò)誤消息輸出到瀏覽器的 JavaScript 控制上。window.onerror(描述錯(cuò)誤的一條消息, 字符串--存放引發(fā)錯(cuò)誤的JavaScript代碼所在的文檔url, 文檔中發(fā)生錯(cuò)誤的行數(shù))
setTimeout()	超時(shí)調(diào)用——在指定的時(shí)間過后執(zhí)行代碼window.setTimeout(function(){...}, 毫秒)
setInterval()	間歇調(diào)用——每隔指定的時(shí)間就執(zhí)行一次window.setInterval(function(){...}, 毫秒)

應(yīng)用場景應(yīng)用場景：
1、確認(rèn)窗口位置及大小
獲取窗口位置的屬性與方法

屬性	說明	兼容性
screenLeft	窗口相對(duì)于屏幕左邊的位置	適用于IE、Safari、Chrome
screenTop	窗口相對(duì)于屏幕上邊的位置	適用于IE、Safari、Chrome
screenX	窗口相對(duì)于屏幕左邊的位置	適用于Firefox
screenY	窗口相對(duì)于屏幕上邊的位置	適用于Firefox
moveBy(x,y)	接收的是在水平和垂直方向上移動(dòng)的像素?cái)?shù)	全兼容
moveTo(x,y)	接收的是新位置的x和y坐標(biāo)值	全兼容

跨瀏覽器獲取窗口左邊和上邊位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX

var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY

窗口大小屬性與方法

屬性	說明
innerWidth innerHeight	IE9+、Safari、Firefox、Opera: 該容器中頁面視圖區(qū)的大小 Chrome: 返回視口大小移動(dòng)設(shè)備：返回可見視口（即屏幕上可見頁面區(qū)域的大?。? 移動(dòng)IE瀏覽器：不支持該屬性,當(dāng)移動(dòng)IE瀏覽器將布局視口的信息保存至document.body.clientWidth與document.body.clientHeight中
outerWidth outerHeight	IE9+、Safari、Firefox: 返回瀏覽器窗口本身的尺寸 Opera: 返回頁面視圖容器的大小 Chrome: 返回視口大小
resizeTo(width, height)	接收瀏覽器窗口的新寬度與新高度
resizeBy(width, height)	接收新窗口與原窗口的寬度與高度之差

2、導(dǎo)航和打開窗口

屬性	說明
open(url,[target,string,boolean])	url: 要加載的URL， target: 窗口目標(biāo) string: 特定的字符串，以逗號(hào)分隔的字符串表示新窗口顯示的特性 boolean: 表示新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值

3、定時(shí)器
setTimeout()與setInterval()都是由于 JavaScript 的語言特性所產(chǎn)生的，由于 JavaScript 是一個(gè)單線程的解釋器，因此一定時(shí)間內(nèi)只能執(zhí)行一段代碼，為了控制要執(zhí)行的代碼，便有了一個(gè) JavaScript 隊(duì)列。這些任務(wù)會(huì)按照將他們添加到隊(duì)列的順序執(zhí)行。setTimeout()和setInterval()的第二個(gè)參數(shù)會(huì)告訴 JavaScript 再過多長時(shí)間把當(dāng)前任務(wù)添加到隊(duì)列中。如果隊(duì)列是空的，那么添加的代碼會(huì)立即執(zhí)行；如果隊(duì)列不是空的，那么它就要等前面的代碼執(zhí)行完了之后再執(zhí)行。
兩者在被調(diào)用之后，都會(huì)返回一個(gè)數(shù)值 ID，這個(gè) ID 可以用來取消對(duì)該方法的調(diào)用
下面是一段倒計(jì)時(shí)的代碼

 
 var num = 10 
 var interval = setInterval(function(){ 
     num -- 
     console.log(num)
     if(num == 0) { 
         clearInterval(interval) 
         console.log("Done") 
     } 
 }, 1000)  


 
 var num = 10
 var timeout = function(){
     num--
     console.log(num)
     if(num > 0){
         setTimeout(timeout, 1000)
     }else {
         console.log("Done")
     }
 }
 setTimeout(timeout,1000)

上面使用兩種方法都可以進(jìn)行倒計(jì)時(shí)，但是使用 `setInterval()` 方法的時(shí)候，再不加干涉的情況下，該方法會(huì)一直執(zhí)行到頁面的卸載，所以一般情況下`serInterval()`比較消耗性能。然后`setTimeout()`方法可以通過調(diào)用自身完成間歇調(diào)用的功能。所以說，在一般情況下使用`setTimeout()`來完成超時(shí)與間歇調(diào)用。

Location 對(duì)象

提供當(dāng)前窗口中的加載的文檔有關(guān)的信息和一些導(dǎo)航功能。既是 window 對(duì)象屬性，也是 document 的對(duì)象屬性

window.location === document.location  //true

location 還將 url 解析為獨(dú)立的片段，可通過 location 的屬性來訪問不同的片段

location 對(duì)象的主要屬性：

屬性名	例子	說明
hash	" #host "	返回 url 中的 hash（#后字符>=0）
host	" juejin.im:80 "	服務(wù)器名稱+端口（如果有）
hostname	" juejin.im "	只含服務(wù)器名稱
href	" https://juejin.im/book/5a7bfe... "	當(dāng)前加載頁面的完整的 url
pathname	" /book/5a7bfe595188257a7349b52a "	返回 url 的的目錄和（或）文件名
port	" 8080 "	url 的端口號(hào)，如果不存在則返回空
protocol	" https: (or http:) "	頁面使用的協(xié)議
search	" ?name=aha&age=20 "	返回 url 的查詢字符串，以問號(hào)開頭

location 的應(yīng)用場景：
1、解析 url 查詢字符串參數(shù)，并將其返回一個(gè)對(duì)象，可通過循環(huán)、正則來實(shí)現(xiàn)，方法有很多,實(shí)現(xiàn)的大體思路是：
通過location的search屬性來獲取當(dāng)前 url 傳遞的參數(shù)，如果 url 中有查詢字符串的話就將其問號(hào)截取掉，然后再遍歷里面的字符串并以等號(hào)為斷點(diǎn)，使用decodeURIComponent()方法來解析其參數(shù)的具體數(shù)值，并將其放在對(duì)象容器中，并將其返回
2、載入新的文檔，也可以說是刷新頁面，主要有三個(gè)方法：

assign()： location.assign("http://www.xxx.com")就可立即打開新 url 并在瀏覽器是我歷史中生成一條新的記錄, 在一個(gè)生成了 5 條瀏覽記錄的頁面中，然后使用 assign()跳轉(zhuǎn) url 后，history 記錄只剩兩條，一條是通過 assign 跳轉(zhuǎn)的頁面，另一條則是上一個(gè)頁面（使用 assign()跳轉(zhuǎn)方法的頁面），其余的所有頁面都被清除掉了

replace(): location.replace("http://www.bbb.com")只接受 url 一個(gè)參數(shù)，通過跳轉(zhuǎn)到的 url 界面不會(huì)在瀏覽器中生成歷史記錄，就是 history 的 length 不會(huì)+1，但是會(huì)替代掉當(dāng)前的頁面

reload(): 其作用是重新加載當(dāng)前顯示的頁面，當(dāng)不傳遞參數(shù)的時(shí)候，如果頁面自上次請求以來并沒有改變過，頁面就會(huì)從瀏覽器中重新加載，如果傳遞true，則會(huì)強(qiáng)制從服務(wù)器重新加載

Navigation 對(duì)象

navigation 接口表示用戶代理的狀態(tài)和標(biāo)識(shí)，允許腳本查詢它和注冊自己進(jìn)行一些活動(dòng)

navigation 對(duì)象的屬性方法

navigation 應(yīng)用場景

檢測插件

注冊處理程序

Screen 對(duì)象

其提供有關(guān)窗口顯示的大小和可用的顏色輸入信息。

screen 對(duì)象的屬性和方法

History 對(duì)象

history 對(duì)象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起，history 對(duì)象是用窗口的瀏覽歷史用文檔和文檔狀態(tài)列表的形式表示。history 對(duì)象的 length 屬性表示瀏覽歷史列表中的元素?cái)?shù)量，但出于安全考慮，腳本不能訪問已保存的 url

History 對(duì)象的屬性及方法

屬性	說明
go()	1、以在用戶的歷史記錄中任意跳轉(zhuǎn)，go(n)表示前進(jìn) n 頁， go(-n)表示后退 n 頁(n>0) 2、go()可以傳遞字符串參數(shù)，瀏覽器歷史中如果有這條 url 則實(shí)現(xiàn)跳轉(zhuǎn)至包含該字符串的第一個(gè)位置，否則什么也不做
back()	后退一頁
forword()	前進(jìn)一頁
length	保存歷史記錄的數(shù)量，可用于檢測當(dāng)前頁面是否是用戶歷史記錄的第一頁（history.length === 0）

GPU云服務(wù)器云服務(wù)器對(duì)象模型與數(shù)據(jù)模型對(duì)象模型實(shí)體對(duì)象模型的對(duì)象模型

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94014.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mayaohua

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

VoLLcloud-香港百兆起大帶寬VPS-CERA機(jī)房獨(dú)服-CMI四網(wǎng)直連線路-全場低價(jià)促銷-原生

閱讀 2676·2021-10-25 09:45
碼神軍訓(xùn)（四，五）——代碼跳舞軍體拳

閱讀 1313·2021-10-14 09:43
云主機(jī)有什么優(yōu)勢-云主機(jī)的優(yōu)勢是什么？

閱讀 2368·2021-09-22 15:23
ftp主機(jī)名是什么-ftp主機(jī)地址是什么？

閱讀 1631·2021-09-22 14:58
新手引導(dǎo)動(dòng)畫的4種實(shí)現(xiàn)方式

閱讀 1996·2019-08-30 15:54
【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

閱讀 3600·2019-08-30 13:00
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

閱讀 1428·2019-08-29 18:44
微信小程序引入字體圖標(biāo)

閱讀 1636·2019-08-29 16:59

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

知識(shí)整理——瀏覽器對(duì)象模型

相關(guān)文章

**前端面試（知識(shí)點(diǎn)）整理（一）**

**前端面試（知識(shí)點(diǎn)）整理（一）**

**前端面試（知識(shí)點(diǎn)）整理（一）**

【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

發(fā)表評(píng)論

0條評(píng)論

mayaohua

男|高級(jí)講師

TA的文章

VoLLcloud-香港百兆起大帶寬VPS-CERA機(jī)房獨(dú)服-CMI四網(wǎng)直連線路-全場低價(jià)促銷-原生

碼神軍訓(xùn)（四，五）——代碼跳舞軍體拳

云主機(jī)有什么優(yōu)勢-云主機(jī)的優(yōu)勢是什么？

ftp主機(jī)名是什么-ftp主機(jī)地址是什么？

新手引導(dǎo)動(dòng)畫的4種實(shí)現(xiàn)方式

【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

微信小程序引入字體圖標(biāo)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

知識(shí)整理——瀏覽器對(duì)象模型

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！