BOM基础教程解析！菜鸟必看，建议收藏

虽然 ECMAScript 把浏览器对象模型（BOM，Browser Object Model）描述为JavaScript 的核心，但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。多年来，BOM 是在缺乏规范的背景下发展起来的，因此既充满乐趣又问题多多。毕竟，浏览器开发商都按照自己的意愿来为它添砖加瓦。最终，浏览器实现之间共通的部分成为了事实标准，为 Web 开发提供了浏览器间互操作的基础。HTML5 规范中有一部分涵盖了 BOM 的主要内容，因为 W3C 希望将JavaScript 在浏览器中最基础的部分标准化。

1.window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

1.1.Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。比如：

<script>
  var name = 'zhangsan';
  var sayName = function () {
    console.log(this.name);
  }
  console.log(window.name); //zhangsan
  sayName();  //zhangsan
  window.sayName(); //zhangsan
</script>

这里，变量 name 和函数 sayName()被定义在全局作用域中，它们自动成为了 window 对象的成员。因此，变量 name 可以通过 window.name 来访问，而函数 sayName()也可以通过 window.sayName()来访问。因为 sayName()存在于全局作用域，this.name 映射到 window.name，所以就可以显示正确的结果了。

1.2.Window窗口

1.2.1.窗口位置

screenLeft和screenTop

属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY

属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)

pageXOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

注意：IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。

1.2.2.窗口大小

innerWidth

页面视图区的宽度

innerHeight

页面视图区的高度

outerWidth

浏览器窗口的宽度

outerHeight

浏览器窗口的高度

注意：所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

1.2.3.screen对象

屏幕总宽度/高度(像素单位):

screen.width

screen.height

可用宽度/高度(像素单位):

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率: