BOM結構

用戶瀏覽網頁的時候，瀏覽器會自動創建一些對象，這些對象存放著瀏覽器窗口的屬性和相關信息，也就是大家熟稱的BOM。瀏覽器對象模型是一個層次化的對象集，我們可以通過window對象訪問所有對象集。層級關系如下圖所示：

window對象

window對象表示瀏覽器中打開窗體，提供關于窗口狀態的信息。可以使用window對象訪問窗口中的文檔，事件以及影響窗口的瀏覽器特性。同時大家應該知道，在javascript中window對象是全局對象，就像我們C#中的static一樣（不知道對不對呃），也就是要引用當前窗體根本不需要特殊的語法，可以把該窗口的屬性作為全局變量來使用。例如，我們可以直接寫document，而不必寫window.document。

window方法及其描述

方法	描述
alert()	彈出一個帶有一段消息和確認按鈕的窗體
blur()	把鍵盤焦點從頂層窗口移開
clearInterval()	取消由setInterval()設置的timeout
clearTimeout()	取消有setTimeout()方法設置的timeout
close()	關閉瀏覽器窗口
confirm()	顯示帶有一段消息以及確認按鈕盒取消按鈕的對話框
focus()	把鍵盤焦點給予一個窗口
moveBy()	可相對窗口的當前坐標移動指定的像素
moveTo()	把窗口的左上角移動到一個指定的坐標
open()	打開一個新的瀏覽器窗體
prompt()	顯示可提示用戶輸入的對話框
resizeBy()	按照指定的像素調整窗口的大小
resizeTo()	把窗體的大小調整到指定的寬度和高度
scrollBy()	按照指定的像素值來滾動內容
scrollTo()	把內容滾動到指定的坐標
setInterval()	按照指定的周期(毫秒)來調用函數或計算表達式
setTimeout()	在指定的毫秒數后調用函數或表達式

1.window.open("www.baidu.com","dqcx","height=200,width=300,top=20,left=20,resizable=yes");　　//打開一個新的窗體

2.if(confirm(“確定關閉？”))
　　alert("你點擊了確定");
　else
　　alert("你點擊了取消");　　　　//confirm()方法，注意它只接受一個參數，即要顯示的文本

3.var name=prompt("姓名：","");　　　　//prompt()方法，提示用戶輸入某些信息，接受連個參數，一個顯示文本，一個默認輸入文本

4.window.history.go(-1);　　　　//后退一頁
　window.history.go(1);　　　　//前進一頁

PS:相關的用法很多，這里簡單列了幾個，可以根據以上表格一一學習研究。

location對象

location對象存儲在window對象的location屬性中，表示當前頁面的URL地址。

location對象的屬性

屬性	描述
host	設置或返回主機名和當前URL的端口號
hostname	設置或返回當前URL的主機名
href	設置或返回完整的URL
port	設置或返回當前URL的端口號
protocol	設置或返回當前URL的協議
search	設置或返回從問號(?)開始的URL，也就是查詢字符串

href屬性是既可以讀又可以寫的字符串

local對象的方法

• assign()方法：加載新的文檔
• reload()方法：重新加載當前文檔（對于此方法由于網絡延遲和系統資源等不確定因素，最好放到調用的最后一行）
• replace()方法：用新的文檔替換當前文檔

navigator對象

通過這個例子應該蠻容易理解，就不列表格了、、、

screen對象

javascript可以獲取某些關于用戶屏幕的信息

屬性	描述
availHeight	返回顯示屏幕的高度（除window任務欄）
availWidth	返回顯示屏幕的寬度（除window任務欄）
deviceXDPI	返回顯示屏幕的每英寸水平點數
deviceXDPI	返回顯示屏幕的每英寸垂直點數
fontSmoothingEnabled	返回用戶是否在顯示控制面板中開啟了字體平滑
?height	返回顯示屏幕的高度
?logicalXDPI	返回顯示屏幕每英寸的水平方向的常規點數
?logicalYDPI	返回顯示屏幕每英寸的垂直方向的常規點數
?pixelDepth	返回 顯示屏幕的顏色分辨率（比特每像素）
?updateInterval	設置或返回屏幕的刷新率
?width	返回顯示器屏幕的寬度

每個window對象的screen屬性都引用screen對象。該對象存放著有關顯示器屏幕相關的信息，我們可以根據這些信息來優化頁面的輸入等等。

孤獨的根號3

以上純屬基礎知識，大家自己慢慢實際操作吧，我就點到為止咯！

接下來快要去實習了，從來木有出過遠門，獨處異鄉的我該怎么辦？想想，LOL也戒了，剩下博客園陪我，夠了、、、成長ing

轉載于:https://www.cnblogs.com/vchenpeng/p/3176384.html

總結

以上是生活随笔為你收集整理的浏览器对象模型(BOM)的全部內容，希望文章能夠幫你解決所遇到的問題。

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