1、BOM
概念：Browser Object Model 瀏覽器對象模型
作用：提供了使用JS操作瀏覽器的接口

2、BOM包含了許多對象信息，包括如下這些：
（1）screen 屏幕信息
（2）location 網頁的網址相關信息
（3）history 歷史記錄信息
（4）navigator 瀏覽器的相關信息
（5）frames 框架對象（頁面中包含iframe/frames等）
注意：
BOM 瀏覽器信息對象
window 瀏覽器中最頂層對象，所有其他對象信息都掛載到window上
DOM 文檔的節點
BOM > window > DOM

3、window是瀏覽器中最頂層對象
（1）screen——獲取屏幕信息對象
console.log(window.screen);
console.log(screen);
相關屬性：
screen.width 屏幕的寬度
screen.height 屏幕的高度
screen.availWidth 可用的寬度
screen.availHeight 可用的高度
（2）location——獲取網頁地址信息
console.log(window.location);
相關屬性：
location.href 網址
location.protocal 協議
location.host 主機地址（包含端口號）
location.hostname 主機地址（不包含端口號）
location.pathname 路徑“/”
location.port 端口號
location.hash 錨點
相關方法：
A、重載
location.reload(); 網頁重新加載；默認情況下，對于表單中的數據不會被清空或恢復到初始狀態。
location.reload(true); 強制加載；會清空表單的數據
B、網頁跳轉
超鏈接a標簽進行跳轉
使用JS控制頁面跳轉 location.href = 'http://www.baidu.com';
（3）history——獲取歷史記錄對象信息
console.log(window.history);
console.log(history);
相關屬性：
history.length
相關方法：
A、通過JS控制頁面的前進、后退
history.forward(); 前進
history.back(); 后退
B、history.go(number);
number為負數，說明是后退number
number為正數，說明是前進number
例如：X<-->Y<-->Z
若想從X跳到Z，則使用history.go(2);
若想從Z跳到X，則使用history.go(-2);

（4）navigator——獲取瀏覽器對象信息
console.log(navigator);
相關屬性：
navigator.onLine 網絡是否連接
navigator.userAgent 用戶代理----描述用戶訪問瀏覽器采用何種客戶端工具（PC端/移動端）
(包括windows/iPhone/Android/iPad)
注意：經常根據用戶是移動設備、PC設備訪問不同的網站
移動設備 m.xxx.com
PC設備 xxx.com
判斷當前來源是移動端或PC端
var checkUserAgent = /iphone|android|ipad/i;
if(checkUserAgent.test(navigator.checkAgent)){
alert('跳轉到移動端');
location.href = "http://m.itxdl.cn";
}else{
alert('直接顯示PC端數據');
locatio.href = "http://www.itxdl.cn";
}
navigator.cookieEnabled 檢測客戶端的瀏覽器是否支持cookie,值為true/false
注：cookie是會話控制的一種方式，用于記錄特定的一些信息，常見的記錄密碼、用戶界面風格等

（5）frames——獲取框架對象
console.log(frames); <====> console.log(window);
相關屬性：
frames.length 描述嵌入頁面的iframe數量
注意：
A、window和frames一定程度上是等效的。
B、self 描述窗口自身
parent 描述父級窗口
top 頂級窗口
C、父子窗口之間相互操作（從父級窗口出發獲取子窗口中的元素、通過子窗口操作父級窗口元素樣式）

?

4、JS中常用值的獲取
（1）可視區域的寬度和高度
寬度：document.documentElement.clientWidth || document.body.clientWidth
高度：document.documentElement.clientHeight || document.body.clientHeight
（2）屏幕的寬度和高度
寬度：screen.width
高度：screen.height
（3）獲取文檔的寬度和高度
寬度：document.documentElement.scrollWidth || document.body.scrollWidth
高度：document.documentElement.scrollHeight || document.body.scrollHeight
（4）獲取文檔滾動條的水平和垂直偏移值
水平偏移：document.documentElement.scrollLeft || document.body.scrollLeft
垂直偏移：document.documentElement.scrollTop || document.body.scrollTop
（5）當前鼠標距離可視區域左上角位置
e.clientX：距離可視區域左上角的水平偏移值
e.clientY：距離可視區域左上角的垂直偏移值
（6）距離當前文檔左上角的偏移值
e.pageX：距離文檔左上角的水平偏移值
e.pageY：距離文檔左上角的垂直偏移值

5、滾動事件onscroll（水平或垂直方向滾動時都可以觸發）

6、無縫輪播效果實現
scrollLeft屬性
定時器

7、窗口的打開與關閉
window.open(url，name，feature) 打開新頁面;會返回一個 標志
url為要打開的地址
name用來表示打開的頁面
feature描述打開網頁的相關信息
close() 關閉使用JS打開的窗口
注意：理論上不允許使用JS關閉自己打開的窗口，JS只能關閉使用JS打開的新窗口。

8、關于彈框

注意：所有的彈框都具有阻塞頁面加載的作用。
alert() 警告框
confirm() 確認框
prompt() 獲取用戶輸入的數據

轉載于:https://www.cnblogs.com/sherryStudy/p/bom.html

總結

以上是生活随笔為你收集整理的BOM相关知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。