一、什么是BOM模型？
当我们打开某一web应用程序，系统会自动生成一个模型，该模型最顶层为Window对象，其他对象（document、screen、location）都是该对象的子对象。
二、BOM模型原理图
三、window对象
| 对象 | 说明 |
| alert(message) | 弹出警告框（信息提示） |
| confirm(message) | 确认框（删除、重置时进行触发） |
| prompt(message[,defstr]) | 输入提示框 |
| open(url[,name[,features]]) |
打开新窗口，规格参数如下： menubar 菜单栏 toolbar 工具栏 scrollbars 滚动条 fullscreen 全屏 directories 链接工具 location 地址栏 status 状态栏 resizable 是否可以调整大小 以上参数都是boolean类型数据，可以设置为（yes/no） width、height、left、top |
| close() | 关闭当前窗口（有兼容性问题） |
| print() | 打开当前窗口 |
| moveBy(x,y) | 相对移动 |
| moveTo(x,y) | 绝对移动 |
| resizeBy(x,y) | 改变窗口大小（相对） |
| resizeTo(x,y) | 改变窗口大小（绝对） |
| scrollBy(x,y) | 相对滚动 |
| scrollTo(x,y) | 滚对滚动 |
| setInterval(表达式,毫秒) | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout(表达式,毫秒) | 在指定的毫秒数后调用函数或计算表达式。 |
| clearInterval(定时器对象) | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout(定时器对象) | 取消由 setTimeout() 方法设置的 timeout。 |
例1：模拟打开新窗口
window.onload = function() { document.getElementById('btn').onclick = function() { window.open('http://www.baidu.com/','newwindow','width=500,height=400,menubar=yes'); } }
例2：通过js编写返回顶部功能
window.onload = function() { document.getElementById('btn').onclick = function() { window.scrollTo(0,0); } }
例3：调用系统打印机打印当前窗口
window.onload = function() { document.getElementById('btn').onclick = function() { window.print(); } }
四、navigator对象（浏览器对象）
| 对象 | 说明 |
| appCodeName | 浏览器内核名称 |
| appName | 浏览器名称 |
| appVersion | 浏览器发行版本号 |
| platform | 操作系统信息 |
| online | 是否脱机工作 |
| cookieEnabled | 是否开启cookie |
| userAgent | 用户代理信息，早期用于浏览器判断 |
document.write('浏览器内核名称：'+window.navigator.appCodeName+'<hr />');
document.write('浏览器名称：'+window.navigator.appName+'<hr />');
document.write('浏览器代理信息：'+window.navigator.userAgent+'<hr />');
if(window.navigator.userAgent.indexOf('MSIE') > 0) {
document.write('IE浏览器');
} else {
document.write('W3C浏览器');
}
五、location对象
| 对象 | 说明 |
| host | 主机名称 |
| port | 端口号，默认是80端口，此处一般都是空白的 |
| href | 获取当前页面的完成URL链接地址 |
| pathname | 路径名称 |
| protocol | 协议（http://协议https://协议） |
| search | 获取包括？问号在内的参数 |
| assign(url) | 加载url页面（相当于跳转功能） |
document.write('当前url地址：'+window.location.href+'<hr />');
document.write('搜索参数：'+window.location.search+'<br />');
// 加载新页面
window.location.assign('http://www.baidu.com');
六、screen对象
| 对象 | 说明 |
| availHeight | 可用高度 |
| availWidth | 可用宽度 |
| colorDepth | 颜色比特值 |
| height | 高度 |
| width | 宽度 |
document.write('屏幕宽度：'+window.screen.width+'<hr />');
document.write('屏幕高度：'+window.screen.height);
七、document对象
常用方法：
| 方法 | 说明 |
| getElementById('id') | 通过id属性获取指定的DOM对象 |
| getElementsByName('name') | 通过元素的name属性获取DOM对象，返回数组 |
| getElementsByTagName('tagname') | 通过标签名称获取DOM对象，返回数组 |
常用属性：
| 属性 | 说明 |
| linkColor | 链接颜色 |
| alinkColor | 正在访问的链接颜色 |
| vlinkColor | 访问后的链接颜色 |
| bgColor | 背景颜色 |
| fgColor | 字体颜色 |
| title | 标题 |
function display() { if(document.title=='BOM模型') { document.title='【有新消息了】- BOM模型'; } else { document.title='BOM模型'; } // 设置定时器调用display函数 setTimeout('display()',1000); } window.onload = function() { display(); }