JavaScript中BOM知识总结

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.event

IE的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];
        }
    }