JavaScript高级程序设计（第3版）
BOM（浏览器对象模型）
要说BOM是什么东西，可以需要和DOM一起来描述。
看一下书中的名词解释：
BOM（浏览器对象模型），提供与浏览器交互的方法和接口。
DOM（文档对象模型），提供访问和操作网页内容的方法和接口。
很好，不知所云。
在来看下书中的如何描述BOM和DOM分别能做哪些事情：
BOM：
- 弹出新浏览器窗口的功能
- 移动、缩放和关闭浏览器窗口的功能
- 提供浏览器详细信息的navigator对象
- 提供浏览器所加载页面的详细信息的location对象
- 提供用户显示器分辨率详细信息的screen对象
- 对cookies的支持
- 像XMLHttpRequest 和 IE的ActiveXObject 这样的自定义对象
DOM：
- DOM1
- DOM核心（DOM Core）：映射基于XML的文档结构，以便简化对文档中仁义部分的访问和操作。
- DOM HTML：针对HTML的对象和方法。
- DOM2
- DOM视图（DOM Views）:定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口
- DOM事件（DOM Events）：定义了基于CSS为元素应用样式的接口
- DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。
- DOM3
- DOM加载和保存（DOM Load and Save）：引入了以统一方式加载和保存文档的方法
- DOM验证（DOM Validation）：新增了验证文档的方法
- DOM核心扩展：支持XML Infoset、XPath和XML Base
想必单纯听BOM和DOM的时候，你并不能知道这中文翻译过来的解释是什么意思。BOM其实就像是我们房间的整体结构，你房间的信息（window、screen）、房间的管线信息（location、location、cookies）、房间在当前区域的市政规划（navigator）。BOM就如同没有装修房子前的基本信息，在开发时随时可以获取当前网页所处的环境和信息，并且可以为网页存放一些临时或永久的信息，保证开发心知肚明。DOM就与BOM相反了。DOM就是房间里的施工图了，你想在哪里显示个字，在哪里放张图片，完全交给了DOM来处理。同时DOM具备单独将放冰箱的位置换成电视。当然，换成智能电视，可以控制他，那这个DOM元素就是具备操作能力，即事件。涂个粉色的墙吧，让CSS来协助帮忙，告诉CSS是涂哪面墙就可以。
所以，BOM可以理解为获取当前页面所在的基本信息，和所在浏览器信息。DOM可以理解为获取用户见到的，看到的页面内容。
接下来，就是逐一分析各个部分了。先从BOM开始吧。请翻到P211面第8章。
BOM操作：
BOM既然是获取浏览器当前的基本信息，这些信息就放在各个“对象”的手上。“对象”，顾名思义就是目标物，可以向它索取你必要的内容。举个例子，你如果想知道当前浏览器的宽度和高度，有一个叫“window”的“对象”。只需要window.screen.availHeight（高度）、window.screen.availWidth（宽度），你需要的数据就能得到。BOM到底有多少“对象”呢？
- window对象
- location对象
- navigator对象
- screen对象
- history对象
window对象。这个对象是BOM的核心对象，核心在于它能干很多事情》》》
-
全局作用域
- 可以直接对window对象新增或删除变量甚至函数。例如window.age = 29。
- 那我也可以使用var age = 29来定义变量。那他们有什么本质上的区别吗？
- 在于delete操作符删除上。全局变量delete age 会报错或者返回false。window对象通过delete window.age可以直接删除。
- Eg.
window.age = 29delete window.age
-
窗口关系及框架
- 这个目前对我来说比较少用了，目前使用的是单页面渲染，以前要动态显示数据，需要通过ifarme来嵌套处理。
- 获取三种不同窗口信息：window获取当前窗口信息，top获取最外层窗口信息，parent获取当前窗口的父级信息
- eg.
-
window.frames[0]获取当前窗口信息 -
top.frames[0]获取最外层窗口信息 -
parent.frames[0]获取当前上一级（父级）窗口信息
-
-
窗口位置
- 获取窗口位置的方法有很多种，并不是因为有好几种代码可以获取，而是因为各个浏览器之间的问题，导致了兼容上出现了不同的情况。比如有部分浏览器是通过screenLeft来确定屏幕的左边，而有些浏览器是通过xcreenX来确定屏幕的左边。为了解决跨屏幕兼容的问题。作者提供如下调整。
- 当然，作者还介绍了窗口偏移
window.moveTo(0,0)屏幕位置和window.moveBy(0,0)屏幕移动偏移量。 - eg
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
-
窗口大小
- 这里还挺有意思的，作者讲到这点时，似乎觉得无奈——获取窗口大小不是一件简单的事情。
- 由于各个浏览器对窗口大小的定义不同。但目前有两种相对可行的获取大小的方法。
window.innerWidth()，window.innerHeight()document.documentElement.outerWidth()，document.documentElement.outerHeight()- 对于这种又是兼容问题，作者提出如下方法。
var pageWidth = window.innerWidth, pageHeight = window.innerHeight;
if (typeof pageWidth != "number”){
if (document.compatMode == "CSS1Compat”){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
-
导航和打开窗口
- window.open() 导航到一个特定的URL
- 其中open中有四个参数（URL，窗口目标，一个特性字符串，一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值）
- eg
window.open("[http://www.wrox.com/","wroxWindow](http://www.wrox.com/)", "height=400,width=400,top=10,left=10,resizable=yes");- URL：写入要弹出的窗口所对应的地址
- 窗口目标：调转到新窗口的名字
-
一个特性字符串：弹出的新窗口的配置信息，以逗号隔开的字符串
- 配置参数如下：
-
配置表
- 间歇调用和超时调用
-
超时调用：
-
var timer = setTimeout(() => {}, 1000); -
指定时间过后执行代码
-
中途取消执行：
clearTimeout(timer)
-
-
间歇调用
var timer2 = setInterval(() => {}, 1000);- 每隔指定的时间就执行一次代码
- 取消循环执行：
clearInterval(timer2)
-
-
系统对话框
-
这里常用的三种对话框：
alert()警告框、comfirm()确认框、prompt()提示输入框 -
那还有两种相对少用，但认识一下：
window.print()显示“打印”对话框、window.find()显示“查找”对话框
总结
这一节，重点了解了什么是BOM，并了解了BOM的核心对象——window。后续我们会共同来讨论其他几个对象的实际运用。
网友评论