在利用JavaScript进行前端开发时，不可避免地要与浏览器窗口进行交互。浏览器的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等，那么操作这些对象都会用到什么方法或属性呢？本文将为你进行总结和归纳。
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浏览器标准的一部分
前端交流群：621071874
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对象，由于document对象内容比较我，我们将在后面专门撰写文章进行讲解）。
三、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 属性返回显示屏幕的颜色分辨率（比特每像素）
话题到这里就结束了，web前端学习的可以来我的群，群里每天都有对应资料学习：621071874，包括这篇文章的高清图片，欢迎初学和进阶中的小伙伴。
如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端EDU’或者‘webxh5’关注后回复‘2017’可以领取一套完整的学习视频
网友评论