BOM指的是浏覽器對象模型，是JavaScript的組成之一，提供了獨立于内容的，與浏覽器視窗進行互動的對象模型，就是用來管理視窗與視窗之間的通信，例如彈出一個新浏覽器視窗，改變視窗大小等
- 彈出新的浏覽器視窗
- 移動，關閉浏覽器視窗以及調整視窗大小
- 實作頁面的前進和後退功能
- 提供web浏覽器詳細資訊的導航對象
- 提供使用者螢幕分辨率詳細資訊的螢幕對象
-
支援cookies
下面是BOM模型圖：
其主要對象是window對象
window對象又稱浏覽器對象，當浏覽器打開HTML文檔時，通常會建立一個window對象，如果定義了多個架構，浏覽器會為原始文檔建立一個window對象，同時為每一個架構另外建立一個window對象。
window對象常用屬性
| 名稱 | 說明 |
| history | 有關客戶通路過的URL的資訊 |
| location | 有關目前URL的資訊 |
window對象的常用方法
| 名稱 | 說明 |
| prompt（） | 顯示可提示使用者輸入的對話框 |
| alert（） | 顯示一個帶有提示資訊和一個确定按鈕的警示對話框 |
| confirm（） | 顯示一個帶有提示資訊，确定和取消按鈕的對話框 |
| close（） | 關閉浏覽器視窗 |
| open（） | 打開一個新的浏覽器視窗，加載給定URL所指定的文檔 |
| setTimeout() | 在指定的毫秒數後調用函數或計算表達式 |
| setInterval() | 按照指定的周期來調用函數或表達式 |
經常看到方法前面沒有window，比如直接調用close（），而不用window.close(),是因為window對象是全局對象，是以可以省略不寫
window常用事件
| 名稱 | 說明 |
| onload | 一個頁面或圖像完成加載 |
| onmouseover | 滑鼠指針移動到某元素之上 |
| onclick | 滑鼠單擊某個對象 |
| onkeydown | 某個鍵盤按鍵按下 |
| onchange | 域的内容被改變 |
history對象
提供使用者最近浏覽過的URL清單
方法有
| 名稱 | 方法 |
| back（） | 加載history對象清單中的前一個URL |
| forward（） | 加載history對象清單中的後一個URL |
| go() | 加載history對象清單中的某個具體的URL |
location對象
提供目前頁面的URL資訊，可以重新裝載目前頁面或載入新頁面
location對象屬性
| 名稱 | 描述 |
| host | 設定或傳回主機名和目前URL的端口号 |
| hostname | 設定或傳回目前URL的主機名 |
| href | 設定或傳回完整的URL |
方法
| 名稱 | 描述 |
| reload（） | 重新加載目前文檔 |
| replace（） | 用新的文檔替換目前文檔 |
location對象常用的屬性是href，通過對此屬性設定不同的網址，進而達到跳轉功能
<a href="javascript:location.href='index.html'">檢視index頁面</a> document對象
既是window對象的一部分，又代表了整個HTML文檔，可用來通路頁面中的所有元素
常用屬性
| 屬性 | 描述 |
| referrer | 傳回載入目前文檔的URL |
| URL | 傳回目前文檔的URL |
這裡有一個要注意的點：關于referrer，如果目前文檔不是通過超連結通路的，則document.referrer的值為null
上網浏覽某個頁面時，由于不是由指定的頁面進入的，系統将會提醒不能浏覽本頁面或直接跳轉到其他頁面，這樣的功能實際上就是通過referrer屬性來完成的。
<script type="text/javascript">
var preURL=document.referrer;//載入本頁面文檔的位址
if(preURL==""){
document.write("你不是從登入頁面進入，5秒後轉入登入頁面");
setTimeout("javascript:location.href='login.html',5000");
}
</script> document對象的常用方法
| 方法 | 描述 |
| getElementById() | 傳回對擁有指定id的第一個對象的引用 |
| getElementsByName() | 傳回帶有指定名稱的對象的集合 |
| getElementsByTagName() | 傳回帶有指定标簽名的對象的集合 |
| write（） |
- getElementById()一般用于通路div，圖檔，表單元素，網頁标簽等，但要求通路的對象的id是唯一的
- getElementsByName()與getElementById()相似，由于一個HTML文檔中的name屬性可能不唯一，是以一般用來通路一組相同name屬性的元素，如具有相同name屬性的單選按鈕等
- getElementsByTagName()是按标簽來通路頁面元素的，一般用于通路一組相同的元素。如一組 ,一組圖檔等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeLink(){
document.getElementById("node").innerHTML="搜狐";
}
function all_input(){
var allInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<allInput.length;i++){
sStr+=allInput[i].value+"<br/>";
}
document.getElementById("s").innerHTML=sStr;
}
function s_input(){
var allInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<allInput.length;i++){
sStr+=allInput[i].value+"<br/>";
}
document.getElementById("s").innerHTML=sStr;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改變層内容" onclick="changeLink()"/><br/>
<br/><input name="season" type="text" value="春">
<input name="season" type="text" value="夏">
<input name="season" type="text" value="秋">
<input name="season" type="text" value="冬">
<br/><input name="b2" type="button" value="顯示input内容" onclick="all_input()"/>
<input name="b3" type="button" value="顯示season内容" onclick="s_input()"/>
<p id="s" ></p>
</body>
</html> ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)