详解BOM浏览器对象模型，看这篇就够了

唏哩呼噜睡大觉
1,453 阅读5分钟

1. JavaScript组成

JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。

一个运行在JavaScript实现应该由三个不同的部分组成：

  1. 核心( ECMAScript) ：JavaScript语言的核心，包含基本语法、数据类型、关键字...
  2. 文档对象模型( DOM) ：提供访问和操作网页内容的方法和接口，可操作HTML中的标签内容、样式、结构。 document.write(“你好”); 输出内容至网页，这就是DOM中方法。
  3. 浏览器对象模型( BOM) ：提供与浏览器交互的方法和接口。可操作浏览器窗口，比如浏览器地址栏，浏览器访问历史等。window.alert(“你好”);浏览器弹出一个消息对话框，这就是BOM中的方法。

2. BOM

2.1 什么是BOM ?

BOM(Browser Object Model)即浏览器对象模型使 JavaScript 有能力与浏览器“对话”。

BOM提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种HTML元素及其内容。

BOM与DOM是独立于程序语言和平台的标准，W3C定义了一组标准接口，而这些接口在浏览器中以对象的形式实现。BOM与DOM均由一组对象组成，对象定义了属性和方法。

2.2 BOM结构图

结构图说明：

  1. 反映了BOM中各对象之间的层次关系。
  2. 在BOM中，window对象是顶层对象，其它对象均是其子对象
  3. history浏览器的浏览历史
  4. location对象代表当前显示的文档的地址
  5. navigator对象提供有关浏览器的各种信息
  6. screen对象提供显示器屏幕相关的一些信息
  7. frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口
  8. document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档

3. Window 对象

3.1 什么是 Window 对象 ？

Window对象是BOM顶层对象，表示浏览器窗口或者网页中的框架。

Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。

访问window对象或子对象属性和方法，要按照层次关系，使用“.”运算符将它们连接起来。

window.alert(); 简写方式 alert();

window.document.write(); 简写方式 document.write();

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  1. 全局变量是 Window 的对象属性。
<!-- 变量a就是全局变量，也是Window对象上的属性 -->
var a = 19;
<!-- 调用 -->
console.log(window.a);// 19
  1. 全局函数是 Window 的对象方法。
<!-- 定义全局函数 -->
function inner() {
   console.log('全局方法');
}
<!-- 调用 -->
window.inner();// 全局方法
  1. 甚至 HTML DOM 的 document 也是 window 对象的属性之一。
3.2 window 对象的属性和方法

掌握对象里面的属性和方法

  1. alert (); 显示带有一段消息和一个确认按钮的警告框。
  2. confirm();显示带有一段消息以及确认按钮和取消按钮的对话框。
  3. setInterval();按照指定的周期（以毫秒计）来调用函数或计算表达式。
  4. setTimeout();在指定的毫秒数后调用函数或计算表达式。
  5. clearInterval();取消由setInterval()设置的timeID。
  6. clearTimeout();取消由setTimeout()方法设置的timeID。
  7. scrollTo();浏览器滚动到指定的位置。
3.2.1 定时器函数

setInterval();方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

  1. setInterval语法
setIntervar(code,millisec);
  1. setTimeout语法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(code,millisec);
3.2.2 消除计时器

定时器一般用于制作动画效果，比如每隔一段时间就移动某个元素的位置。

clearInterval(timeId) => 取消由 setInterval() 设置的 timeId。

clearTimeout(timeId) => 取消由 setTimeout() 方法设置的 timeId。

4. BOM 其他对象

4.1 screen 对象
  1. availWidth显示器屏幕可用宽度，除任务栏外。
  2. availHeight显示器屏幕可用高度，除任务栏外。
  3. Width实际宽
  4. Height实际高

4.2 history 对象

该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。

  1. length整数值，表示浏览器历史列表中的URL的个数。
  2. back();返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同。
  3. forward();前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同。
  4. go();访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。

4.3 location 对象

该对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。

  1. hash表示URL地址中的锚点部分，包括前导符“#”。可读可写。
  2. host表示URL中的主机名和端口，即IP地址或者域名端口，可读可写。
  3. hostname表示URL中的主机名部分。可读可写
  4. href表示当前页面完整的URL地址，可读可写。
  5. pathname表示URL的页面路径部分，包含页面文件名称，可读可写。
  6. port表示URL地址中的端口部分，可读可写
  7. protocol表示URL中的协议部分，包括尾部的":"符号，可读可写
  8. search表示URL中的参数部分，可读可写。
4.4 navigator 对象

该对象提供有关浏览器的各种信息，所有浏览器都支持该对象

  1. userAgent返回由客户机发送服务器的user-agent头部的值
  2. cookieEnabled返回指明浏览器中是否启用cookie的布尔值

avatar
文章
阅读
粉丝