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（） | 向文档写文本，HTML表达式或JavaScript代码 |
- 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>