JavaScript與BOM

BOM：Browser Object Model 瀏覽器對象模型，將瀏覽器的各個部分封裝成對象。
組成：
  Window：窗口對象
  Navigator：瀏覽器對象
  Screen：顯示器對象
  History：歷史記錄對象
  Location：地址欄對象

如何學習它們

• 清楚BOM對象的獲取方式。
• 瞭解BOM對象的屬性。
• 掌握BOM對象中的一些重要方法。
  Window：窗口對象(重要）
  Location：地址欄對象(重要）
  History：歷史記錄對象(重要）
  Navigator：瀏覽器對象
  Screen：顯示器對象

---

說明 下面只會簡單介紹Window，Location，History這三個對象，每個對象的屬性和方法只會介紹一些比較常用的。如果需要學習其他對象或者深入瞭解Window，Location，History，請參考上面的文檔。

---

Window對象

創建：

  Window對象不需要創建就可以直接使用。window.方法名()或者window.屬性名,注意window引用也可以省略，例如window.alert()就可以簡化爲alert()。

---

方法

  與 彈出框 有關的方法

方法	描述	使用示例
alert()	顯示帶有一段消息和一個確認按鈕的警告框。	alert("確定離開嗎？");
confirm()	顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。	var flag = confirm("確定離開嗎?");//用戶點確定返回true，取消返回false
prompt()	顯示可提示用戶輸入的對話框。	var username = prompt("請輸入用戶名");//返回用戶輸入的內容

  與 窗口的打開與關閉 有關的方法

方法	描述	使用示例
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口。	open();//打開一個新的空標籤頁 open("http://www.baidu.com");//在一個新標籤頁打開百度
close()	關閉瀏覽器窗口。	close();//關閉當前頁面。如果想關閉之前打開的百度窗口，需要獲取open方法返回的window對象，調用其close方法。var newWindow = open("http://www.baidu.com");newWindow.close();

  與 定時器 有關的方法

方法	描述	使用示例
setTimeout()	在指定的毫秒數後調用函數或計算表達式。	//第一個參數爲Function對象，第二個參數爲間隔時間(單位毫秒）function add() {alert("執行成功");} setTimeout(add, 3000);//3秒後執行add函數
clearTimeout()	取消由 setTimeout() 方法設置的 timeout。	//取消定時器。setTimeout方法會返回一個定時器的唯一標識，我們如果想取消它直接把這個返回值傳給clearTimeout方法即可。var tid = setTimeout(add,3000);clearTimeout(tid);
setInterval()	按照指定的週期（以毫秒計）來調用函數或計算表達式。	和setTimeout用法差不多，setInterval(add,3000);每隔3秒執行一次add方法
clearInterval()	取消由 setInterval() 設置的 timeout。	取消方式和clearTimeout類似，var tid = setInterval(add,3000);clearInterval(tid);

---

屬性:使用window對象來獲取其他4個BOM對象和Document對象

  獲取其他BOM對象

屬性	描述	使用示例
history	對 History 對象的只讀引用。	window.history或history
location	用於窗口或框架的 Location 對象。	window.location或location
Navigator	對 Navigator 對象的只讀引用。	window.Navigator或Navigator
Screen	對 Screen 對象的只讀引用。	window.Screen或Screen

  獲取Document對象

方法	描述	使用示例
document	對 Document 對象的只讀引用。	window.document或document

---

Location對象

創建：

  Location 對象包含有關當前 URL 的信息。Location 對象是 Window 對象的一個部分，可通過 window.location或直接寫 location 來訪問。

---

方法：

方法	描述
reload()	重新加載當前文檔。

屬性:

屬性	描述	使用示例
href	設置或返回完整的 URL。	location.href = "http://www.baidu.com";//將當前頁面重定向到百度
search	設置或返回從問號 (?) 開始的 URL（查詢部分）。	例如當前頁面的URL爲www.baidu.com?name=zhang 那麼location.search就可以拿到name=zhang

History對象

創建：

  History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。History對象是 Window 對象的一個部分，可通過 window.history或直接寫 history 來訪問。

---

方法：

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

屬性:

屬性	描述
length	返回瀏覽器歷史列表中的 URL 數量。