1 何为BOM
- BOM（Browser Object Model）即浏览器对象模型。
- BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
- 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
2 BOM学习内容
主要学习与浏览器窗口交互的一些对象，例如可以移动、调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。
BOM和DOM结构关系如下图所示：
BOM的核心是Window，而Window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。
Window对象包含属性：document、location、navigator、screen、history、frames；
Document根节点包含子节点：forms、location、anchors、images、links；
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。
2.1 window对象
- 所有浏览器都支持 window 对象，它表示浏览器窗口。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
window对象的属性：
| 属性 | 描述 |
|---|---|
| window | 指示当前窗口，与self等效 |
| document | 对Document对象的只读引用，参阅Document对象 |
| history | 对History对象的只读引用，参阅History对象 |
| location | 用于窗口或框架的Location对象，参阅Location对象 |
| screen | 对Screen对象的只读引用，参阅Screen对象 |
| navigator | 对Navigator对象的只读引用，参阅Navigator对象 |
| defaultStatus | 窗口底部状态栏显示的默认状态消息 |
| innerheight / innerwidth | 返回窗口文档显示区的高度/宽度 |
| outerheight / outerwidth | 返回窗口文外部的高度/宽度 |
| pageXOffset / pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的X/Y位置 |
| parent | 指向包含另一个窗口的窗口（由框架使用) |
| top | 包含特定窗口的最顶层窗口 |
| status | 描述由用户交互导致的状态栏的临时消息 |
| frames | 窗口中的框架对象数组 |
| length | 窗口中的框架数 |
| offscreenBuffering | 用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新 |
window对象方法
| 方法 | 描述 |
|---|---|
| window.close() | 关闭窗口 |
| window.alert(“message”) | 弹出一个具有OK按钮的系统消息框，显示指定的文本 |
| window.confirm(“Are you sure?”) | 弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值 |
| window.prompt(“What’s your name?”, “Default”) | 提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回 |
| window.status | 可以使状态栏的文本暂时改变 |
| window.defaultStatus | 默认的状态栏信息，可在用户离开当前页面前一直改变文本 |
| window.setTimeout(“alert(‘xxx’)”, 1000) | 设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数 |
| window.clearTimeout(“ID”) | 取消还未执行的暂停，将暂停ID传递给它 |
| window.setInterval(function, 1000) | 无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样 |
| window.clearInterval(“ID”) | 取消时间间隔，将间隔ID传递给它 |
| window.history.go(-1) | 访问浏览器窗口的历史，负数为后退，正数为前进 |
| window.history.back() | 同上 |
| window.history.forward() | 同上 |
| window.history.length | 可以查看历史中的页面数 |
| clearInterval() | 取消由 setInterval() 设置的 timeout |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
| createPopup() | 创建一个 pop-up 窗口 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| print() | 打印当前窗口的内容 |
| resizeBy() | 按照指定的像素调整窗口的大小 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度 |
| scrollBy() | 按照指定的像素值来滚动内容 |
| scrollTo() | 把内容滚动到指定的坐标 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式 |
| setTimeout(方法,秒数) | 在指定的毫秒数后调用函数或计算表达式 |
| timeOutEvent = setTimeout(“longPress(‘” + obj + “’)”,1500) | 定时器传参数 |
注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。
- 在使用框架时，每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。每个框架都保存在 frames 集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
- top 对象始终指向最外围的框架，也就是整个浏览器窗口。
窗口位置：
IE、Safari、Opera和Chrome 都提供了screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息，Safari和Chrome也同时支持这两个属性。Opera虽然也支持 screenX和screenY属性，但与screenLeft和screenTop属性并不对应。
可以使用如下方法跨浏览器获得窗口左边和上边位置：
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;2.2 Location对象
location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是
document 对象的属性。location 对象的属性有：
| 属性 | 例子 | 说明 |
|---|---|---|
| hash | “#contents” | 返回URL中的hash（ #号后跟零或多个字符），如果URL中不包含散列，则返回空字符串 |
| host | “www.wrox.com:80” | 返回服务器名称和端口号（如果有） |
| hostname | “www.wrox.com” | 返回不带端口号的服务器名称 |
| href | “http:/www.wrox.com” | 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 |
| pathname | “/WileyCDA/” | 返回URL中的目录和（或）文件名 |
| port | “8080” | 返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串 |
| protocol | “http:” | 返回页面使用的协议。通常是http:或https: |
| search | “?q=javascript” | 返回URL的查询字符串。这个字符串以问号开头 |
location.search 返回从问号到 URL 末尾的所有内容，解析查询字符串，然后返
回包含所有参数的一个对象。
与位置有关的方法
使用location.assign("http://www.wrox.com")可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。等同于：
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";replace()方法可以导航到新页面，但不会在历史记录中生成新记录，不能回到前一个页面。
reload()方法作用是重新加载当前显示的页面。如果调用 reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要为该方法传递参数 true。
location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）2.3 Navigator对象
navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。
2.4 Screen对象
用于获取某些关于用户屏幕的信息，也可用window.screen引用它。
2.5 History对象
history 对象有一个 length 属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。
go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转，正数表示向前跳转。给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做。可以使用两个简写方法back()和 forward()来代替 go()。
能力检测（特性检测）
两个原则：
- 先检测达成目的的最常用的特性。先检测最常用的特性可以保证代码最优化，因为在多数情况下都可以避免测试多个条件。
- 必须测试实际要用到的特性。一个特性存在，不一定意味着另一个特性也存在。
更可靠的方式是使用typeof 进行能力检测。
//检查 sort 是不是函数
function isSortable(object){
return typeof object.sort == "function";
}在浏览器环境下测试任何对象的某个特性是否存在，要使用下面这个函数：
function isHostMethod(object, property) {
var t = typeof object[property];
return t=='function' ||(!!(t=='object' && object[property])) ||
t=='unknown';
}事件参数e
当事件发生的时候，系统会自动的给事件处理函数传递一个参数，会提供事件相关的一些数据，事件参数e浏览器的兼容性检测：
e = e || window.eventIE的document对象有一个all属性，它的里面存放了页面的所有标签，而其它浏览器是没有的，所以在IE中，事件对象的传播会绑定在全局的windows上，所以IE浏览器肯定是都支持window.event的；firefox只支持事件对象作为参数传入，而这又恰恰是IE6~8所无法实现的。IE9/chrome/opera/safari，则两种方式都支持。
获得计算后的样式方法
w3c标准：window.get ComputedStyle(element, null)[attr]
IE浏览器：element.currentStyle[attr]
兼容方法：
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
} else {
return element.currentStyle[attr];
}
}