10.2 JS BOM 对象操作

BOM是什么

• BOM是browser object model的缩写，简称浏览器对象模型
• BOM提供了独立于内容而与浏览器窗口进行交互的对象，主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：
  1. 弹出新的浏览器窗口
  2. 移动、关闭浏览器窗口以及调整窗口大小
  3. 提供 Web 浏览器详细信息的定位对象
  4. 提供用户屏幕分辨率详细信息的屏幕对象
  5. 对 cookie 的支持
  6. IE 扩展了BOM，加入了ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
• 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• BOM缺乏标准, 是各个浏览器厂商根据DOM在各自浏览器上的实现（表现为不同浏览器定义有差别,实现方式不同）；JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
• BOM最初是Netscape浏览器标准的一部分

window对象是BOM的顶层(核心)对象，不是JS对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。JavaScript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(文档对象模型)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

BOM的组成

window对象

window对象是BOM的核心。它具有双重角色，既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

• 全局的window对象

  JavaScript中的任何一个全局函数或变量都是window的属性

• window与self对象

  self对象与window对象完全相同，self通常用于确认就是在当前的窗体内

• window的子对象
  1. document 对象
  2. frames 对象
  3. history 对象
  4. location 对象
  5. navigator 对象
  6. screen 对象
• window对象的函数和属性索引

  窗体控制

  • moveBy() 函数 可相对窗口的当前坐标把它移动指定的像素
  • moveTo() 函数 可把窗口的左上角移动到一个指定的坐标
  • resizeBy() 函数 用于根据指定的像素来调整窗口的大小
  • resizeTo() 函数 用于把窗口大小调整为指定的宽度和高度
  • screenLeft 和 screenTop属性 返回窗口相对于屏幕的X和Y坐标
  • screenX 和 screenY 属性 返回窗口相对于屏幕的X和Y坐标
  • pageXOffset 和 pageYOffset 属性 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置
  • outerWidth 和 outerHeight 属性 设置或返回一个窗口的外部宽度(高度)，包括所有界面元素（如工具栏/滚动条）

  窗体滚动轴控制

  • scrollBy() 函数 可把内容滚动指定的像素数
  • scrollTo() 函数 可把内容滚动到指定的坐标

  提示：上面几个函数的名字最后都带有To或By，to是绝对的意思(从整体而言)，by是相对的意思(从原先的位置而言)

  窗体焦点控制

  • focus() 函数 可把键盘焦点给予一个窗口
  • blur() 函数 可把键盘焦点从顶层窗口移开

  新建窗体

  • open() 函数 用于打开一个新的浏览器窗口或查找一个已命名的窗口
  • close() 函数 用于关闭浏览器窗口
  • createPopup() 函数 用来创建一个弹出窗口
  • opener 属性 是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用
  • closed 属性 可返回一个布尔值，该值声明了窗口是否已经关闭

  对话框

  • alert() 函数 用于显示带有一条指定消息和一个 确认 按钮的警告框
  • confirm() 函数 用于显示一个带有指定消息和确认及取消按钮的对话框
  • prompt() 函数 用于显示可提示用户进行输入的对话框

  状态栏

  • window.defaultStatus 属性 可设置或返回窗口状态栏中的默认文本。该属性可读可写
  • window.status 属性 可设置或返回窗口状态栏中的文本
  • print() 函数 用于打印当前窗口的内容

  时间等待与间隔

  • setTimeout() 函数 用于在指定的毫秒数后调用函数或计算表达式
  • clearTimeout() 函数 可取消由 setTimeout() 方法设置的 timeout
  • setInterval() 函数 可按照指定的周期（以毫秒计）来调用函数或计算表达式
  • clearInterval() 函数 可取消由 setInterval() 设置的 timeout

document对象

document对象用于表现HTML页面当前窗体的内容，是window对象的属性，包含了一个节点对象（该对象包含每个单独页面的所有HTML元素，这就是W3C的DOM对象，我们将在下一章节DOM 中学习）。

frames对象

frames 对象用于表现HTML页面当前窗体的中的框架集合，是window对象的属性。如果页面使用框架，将产生一个框架集合frames，在集合中可用数字(从0开始，从左到右，逐行索引)或名字索引框架。

• window：当前框架
• self 属性 可返回对窗口自身的只读引用
• Top 属性 返回当前窗口的最顶层浏览器窗口
• parent 属性 返回当前窗口的父窗口

history对象

history对象用于窗体中的导航，是window对象的属性，浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能；可以通过back函数后退一个页面，forward函数前进一个页面，或者使用go函数任意后退或前进页面，还可以通过length属性查看history对象中存储的页面数。

• go() 函数 可加载历史列表中的某个具体的页面
• back() 函数 可加载历史列表中的前一个 URL（如果存在）
• forward() 函数 可加载历史列表中的下一个 URL
• length 属性 声明了浏览器历史列表中的元素数量

location对象

location对象用于获取或设置窗体的URL并可以用于解析URL。它既是window对象的属性又是document对象的属性，包含8个属性，其中7个都是当前窗体的URL的一部分，剩下的也是最重要的一个是href属性，代表当前窗体的URL。8个属性都是可读写的，但是只有href与hash的写才有意义。

• assign() 函数 加载一个新的文档
• replace() 函数 可用一个新文档取代当前文档
• reload() 函数 用于刷新当前文档
• hash 属性 是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）
• host 属性 是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号
• hostname 属性 是一个可读可写的字符串，可设置或返回当前 URL 的主机名
• href 属性 是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL
• pathname 属性 是一个可读可写的字符串，可设置或返回当前 URL 的路径部分
• port 属性 是一个可读可写的字符串，可设置或返回当前 URL 的端口部分
• protocol 属性 是一个可读可写的字符串，可设置或返回当前 URL 的协议
• search 属性 是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

navigator对象

navigator对象通常用于检测浏览器与操作系统的版本，是window对象的属性。由于navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本。常用的navigator函数和属性有：

• taintEnabled() 函数 可返回一个布尔值，该值声明了当前浏览器是否启用了 data tainting
• appCodeName 属性 是一个只读字符串，声明了浏览器的代码名
• appName 属性 可返回浏览器的名称
• appVersion 属性 可返回浏览器的平台和版本信息。该属性是一个只读的字符串
• cookieEnabled 属性 可返回一个布尔值，如果浏览器启用了 cookie，该属性值为 true。如果禁用了 cookie，则值为 false
• platform 属性 是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台
• userAgent 属性 是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值
• javaEnabled() 函数 可返回一个布尔值，该值指示浏览器是否支持并启用了 Java。如果是，则返回 true，否则返回 false

screen对象

screen对象用于获取用户的屏幕信息，是window对象的属性。

• width 属性 声明了显示浏览器的屏幕的宽度，以像素计
• height 属性 声明了显示浏览器的屏幕的高度，以像素计
• availWidth 属性 声明了显示浏览器的屏幕的可用宽度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间
• availHeight 属性 声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间
• colorDepth 属性 返回目标设备或缓冲器上的调色板的比特深度
• pixelDepth 属性 返回显示屏幕的颜色分辨率（比特每像素）