瀏覽器對象模型(BOM)是什么？（體系結構+知識詳解）（圖片：結構）

一、總結

1、BOM操作所有和瀏覽器相關的東西：網頁文檔dom，歷史記錄，瀏覽器屏幕，瀏覽器信息，文檔的地址url，頁面的框架集。

2、BOM提供了一些訪問窗口對象的一些方法，我們可以用它來移動窗口位置，改變窗口大小，打開新窗口和關閉窗口，彈出對話框，進行導航以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率。但BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象，以使得我們可以通過這個入口來使用DOM的強大功能！！！

 

二、瀏覽器對象模型(BOM)是什么？（體系結構+知識詳解）

1、基本概念

1. BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型
2. BOM由一系列相關的對象構成，並且每個對象都提供了很多方法與屬性
3. 基本的BOM體系結構圖
   

   

    

   
   

   

   

    

    

4. 能利用BOM做什么？

   BOM提供了一些訪問窗口對象的一些方法，我們可以用它來移動窗口位置，改變窗口大小，打開新窗口和關閉窗口，彈出對話框，進行導航以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率。但BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象，以使得我們可以通過這個入口來使用DOM的強大功能！！！

 

 

2、window對象的方法和屬性

window對象是瀏覽器窗口對文檔提供的一個現實的容器，代表打開的瀏覽器窗口，是每一個加載文檔的父對象

window的屬性和方法調用方法:window.屬性，window.方法
也可以直接調用省略 window.

• 對話框

  1. alert() 顯示帶有一段消息和一個確認按鈕的警告框。
  2. confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。返回值為布爾值
  3. prompt() 顯示可提示用戶輸入的對話框。
     第一個參數是提示,第二個參數是默認值;
     返回值為輸入的值，取消返回null

• 窗體控制

  1. open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
     1. URL:聲明了要在新窗口中顯示的文檔的 URL。
     2. name:聲明了新窗口的名稱或者窗口目標。
     3. features:聲明了新窗口要顯示的標准瀏覽器的特征。
     4. 窗口的屬性：
        1. 常用：
           • width:新建窗口寬度
           • heigth:新建窗口高度
           • top:左上角垂直坐標
           • left:左上角水平坐標
        2. 其他不太常用的屬性：
           • toolbar：指定窗口是否有標准工具欄。當該選項的值為1或yes時，表示有標准工具欄，當該選項的值為0或no時，表示沒有標准工具欄；
           • resizable：指定窗口是否可改變大小，選項的值及含義與toolbar相同；
           • ocation：指定窗口是否有地址工具欄，選項的值及含義與toolbar相同；
           • directories：指定窗口是否有鏈接工具欄，選項的值及含義與toolbar相同；
           • status：指定窗口是否有狀態欄，選項的值及含義與toolbar相同；
           • menubar：指定窗口是否有菜單，選項的值及含義與toolbar相同；
           • scrollbar：指定當前窗口文檔大於窗口時是否有滾動條，選項的值及含義與 toolbar相同；
           • ........
  2. close() 關閉瀏覽器窗口。

• 定時器

  1. setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
  2. setTimeout() 在指定的毫秒數后調用函數或計算表達式。
  3. clearInterval() 取消由 setInterval() 設置的 timeout。
  4. clearTimeout() 取消由 setTimeout() 方法設置的 timeout。

• 其他方法

  1. print() 打印當前窗口的內容。
  2. blur() 把鍵盤焦點從頂層窗口移開。
  3. createPopup() 創建一個 pop-up 窗口。
  4. focus() 把鍵盤焦點給予一個窗口。
  5. moveBy() 可相對窗口的當前坐標把它移動指定的像素。
  6. moveTo() 把窗口的左上角移動到一個指定的坐標。
  7. resizeBy() 按照指定的像素調整窗口的大小。
  8. resizeTo() 把窗口的大小調整到指定的寬度和高度。
  9. scrollBy() 按照指定的像素值來滾動內容。
  10. scrollTo() 把內容滾動到指定的坐標。

 

3、Window 對象屬性

• 掌握部分

  • innerWidth 返回窗口的文檔顯示區的寬度。
  • innerHeight 返回窗口的文檔顯示區的高度。

• 了解部分

  • name 設置或返回窗口的名稱。
  • opener 返回對創建此窗口的窗口的引用。
  • closed 返回窗口是否已被關閉。
  • self 返回對當前窗口的引用。
  • top 返回最頂層的先輩窗口。
  • outerheight 返回窗口的外部高度。
  • outerwidth 返回窗口的外部寬度。
  • status 設置窗口狀態欄的文本。
  • ......

 

 

4、History對象的常用方法

history對象有back和forward兩個方法，它可以跳轉到當前頁的上一頁和下一頁，可以用length屬性查看客戶端瀏覽器的歷史列表中訪問的網頁個數

• back() 加載 history 列表中的前一個 URL。
• forward() 加載 history 列表中的下一個 URL。
• go() 加載 history 列表中的某個具體頁面。

 

5、Location 對象

• Location 對象的屬性

  • href 設置或返回完整的 URL。
  • host 設置或返回主機名和當前 URL 的端口號。
  • hash 設置或返回從井號 (#) 開始的 URL（錨）。
  • hostname 設置或返回當前 URL 的主機名。
  • pathname 設置或返回當前 URL 的路徑部分。
  • port 設置或返回當前 URL 的端口號。
  • protocol 設置或返回當前 URL 的協議。
  • search 設置或返回從問號 (?) 開始的 URL（查詢部分）。

• Location 對象的方法

  • assign() 加載新的文檔。
  • reload() 重新加載當前文檔。

    如果該方法沒有規定參數，或者參數是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。如果文檔已改變，reload() 會再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。

    如果把該方法的參數設置為 true，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。

  • replace() 用新的文檔替換當前文檔。

    replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前記錄。

 

6、Screen 對象

• availHeight 返回顯示屏幕的高度 (除 Windows 任務欄之外)。
• availWidth 返回顯示屏幕的寬度 (除 Windows 任務欄之外)。
• height 返回顯示屏幕的高度。
• width 返回顯示器屏幕的寬度。
• bufferDepth 設置或返回調色板的比特深度。
• ......

 

7、Navigator 對象屬性

• appCodeName 返回瀏覽器的代碼名。
• appMinorVersion 返回瀏覽器的次級版本。
• appName 返回瀏覽器的名稱。
• appVersion 返回瀏覽器的平台和版本信息。
• cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值。
• userAgent 返回由客戶機發送服務器的 user-agent 頭部的值
• onLine 返回指明系統是否處於脫機模式的布爾值。
• ......

 

 

三、測試題-簡答題

1、DOM對象和BOM對象的關系？

解答：DOM對象是BOM對象的大兒子。所以DOM對象的那些操作都是瀏覽器來執行的。

2、BOM中的頂級對象是什么，代表什么意思？

解答：BOM中的頂級對象是window，代表的是瀏覽器打開的一整個窗口。

3、BOM中的頂級對象是window還是windows？

解答：是window，因為一個瀏覽器可以打開很多個窗口，而每一個窗口就是window，一個窗口里面的頁面（document）可以有多個，結構圖里面的document也沒加s，這個window當然不能加，因為只是表示名詞。windows是微軟的中的概念：Microsoft Windows,是美國微軟公司研發的一套GUI操作系統。windows是因為一個windows操作系統可以打開無數個window，基本上一個軟件是一個window。從這種角度來說瀏覽器對象也是window對象。

4、BOM中瀏覽器和window對象和document對象的數量關系？

解答：一個瀏覽器可以有多個窗口（window對象），而每一個窗口可以有多個document。所以window相對於document是一對多。

5、BOM中window對象有幾個兒子，分別是什么？

解答：window對象有6個仔，其中大兒子是document對象。

6、confirm是window對象么，為什么？

解答：confirm是window對象，我們很多時候沒有在其前面加window.是因為幾乎所有瀏覽器都支持這個方法，所以window.可以省略。

7、如何新開一個窗口？

解答：因為要開窗口，肯定要用window對象的方法，那就是open()咯。

8、如何關閉一個窗口？

解答：window的close方法。

9、窗口屬性里面的left、top和標簽的margin-left和margin-top的區別？

解答：left表示到窗口左邊的距離（open()方法里面可能用到和這個屬性），margin-left是到文本流中父親元素的左邊的距離，兩者效果相同，但是一個是屬性，一個是css。

10、BOM中window對象的定時器有哪兩種？

解答：setInterval()和setTimeout()。

11、BOM中window對象的定時器兩種方法的前綴是什么？

解答：set。

12、BOM中window對象的兩種定時器的功能是什么？

解答：設置間隔時間set Interval和設置過期時間set Timeout。

13、BOM中window對象的定時器中的清除時間間隔Interval和清除過期時間Timeout的方法是什么？

解答：clearInterval()和clearTimeout()。

14、BOM中window對象的哪種方法可以直接打印本窗口的內容？

解答：print()。

15、BOM中window對象的哪種屬性返回窗口的文檔顯示區的寬度？

解答：innerWidth。

16、BOM中window對象的哪種屬性返回窗口的文檔顯示區的高度？

解答：innerHeight。

17、BOM中window對象的哪種屬性可以設置或返回窗口的名稱？

解答：name。

18、History對象的作用是什么？

解答：記錄網頁的歷史信息。

19、History對象如何查看歷史列表中訪問的網頁的個數？

解答：History的length屬性。

20、History對象如何查看瀏覽的上一個網頁？（兩種方法）

解答：back()方法和go(-1)方法。

21、History對象如何查看瀏覽的下一個網頁？

解答：forward()方法。

22、Location對象是干嘛的?

解答：其實就是網頁頁面URL的各種信息。

23、Location對象的href屬性是干嘛的？

解答：設置或返回完整的 URL。

24、Location對象的host屬性是干嘛的？

解答：設置或返回主機名和當前 URL 的端口號。

25、Location對象的hostname屬性是干嘛的？

解答：設置或返回當前 URL 的主機名。

26、Location對象的pathname屬性是干嘛的？

解答：設置或返回當前 URL 的路徑部分。

27、Location對象的port屬性是干嘛的？

解答：設置或返回當前 URL 的端口號。

28、Location對象的assign方法是有什么用？

解答：加載新的文檔。

29、Location對象的reload方法是有什么用？

解答：重新加載當前文檔。

30、Location對象的replace方法是有什么用？

解答：用新的文檔替換當前文檔。replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前記錄。

31、Location對象的replace方法會在 History 對象中生成一個新的記錄么？

解答：不會，replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前記錄。

32、DOM中Screen對象是干嘛的？

解答：操作或者返回屏幕screen的各種信息的。

33、window對象的孩子Screen對象的availHeight 屬性是干嘛的？

解答：返回顯示屏幕的高度 (除 Windows 任務欄之外)。

34、window對象的孩子Screen對象的availWidth屬性是干嘛的？

解答：返回顯示屏幕的寬度 (除 Windows 任務欄之外)。

35、window對象的孩子Screen對象的height 屬性是干嘛的？

解答：返回顯示屏幕的高度。

36、window對象的孩子Screen對象的width屬性是干嘛的？

解答：返回顯示器屏幕的寬度。

37、window對象的孩子Screen對象的什么屬性返回顯示屏幕的高度和寬度。

解答：height 和width。

38、window對象的孩子Screen對象的什么屬性返回顯示屏幕的返回顯示屏幕的高度和 寬度(除 Windows 任務欄之外)。

解答：availHeight 和availWidth。

39、BOM中用什么字段來表示可用，比如screen對象可用寬度？

解答：avail，availWidth。

40、window對象的孩子Navigator對象的作用是什么？

解答：返回瀏覽器的各種信息。

41、window對象的孩子Navigator對象的什么屬性返回瀏覽器的名稱？

解答：appName。

42、window對象的孩子Navigator對象的什么屬性返回瀏覽器的平台和版本信息？

解答：appVersion。

43、window對象的孩子Navigator對象的什么屬性返回指明系統是否處於脫機模式的布爾值？

解答：onLine。

44、window對象的孩子Navigator對象的什么屬性返回指明瀏覽器中是否啟用 cookie 的布爾值？

解答：cookieEnabled。

45、BOM中window對象的孩子有那幾個，作用分別是什么？

解答：document對象，操作文檔。History對象：操作訪問歷史。Location對象，操作url。Screen對象，操作屏幕。Navigater對象，操作瀏覽器。Frames數據集，操作frame數據集。

46、BOM的最強大的功能是什么（從dom方向答）？

解答：BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象，以使得我們可以通過這個入口來使用DOM的強大功能！