BOM(浏览器对象模型)

BOM 能干啥？

浏览器对象模型 (BOM)使我们可以用 JavaScript 操控浏览器，使 JavaScript 有能力与浏览器"对话"。

BOM 都有啥？

5大对象：其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象（Screen、Location、History、Navigator）。

• window：管理 浏览器所有的东西
• location：管理 URL
• navigator：管理 浏览器信息
• history：管理 历史记录
• screen：管理 屏幕

一、Window对象

所有浏览器都支持 window 对象。它表示浏览器窗口，在浏览器中最顶层的对象。

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

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

【1】Window对象属性

属性	描述	语法
closed	返回一个布尔值，该值声明了窗口是否已经关闭。	window.closed
defaultStatus	设置或返回窗口状态栏中的默认文本。	window.defaultStatus
document	管理DOM（详情见下文）
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。	window.frames
history	管理历史记录（详情见下文）
innerHeight	返回窗口的文档显示区的高度。（不包含工具栏和滚动条）	window.innerHeight
innerWidth	返回窗口的文档显示区的宽度。（不包含工具栏和滚动条）	window.innerWidth
localStorage	在浏览器中本地存储 key/value 对。没有过期时间。	window.localStorage
length	设置或返回窗口中的框架数量。(包括iframes)	window.length
location	管理URL（详情看下文）
name	设置或返回窗口的名称。	window.name
navigator	管理浏览器信息（详情看下文）
opener	返回来自目标窗口（父窗口）的详细信息	window.opener
outerHeight	返回窗口的外部高度。（包含工具条与滚动条）	window.outerHeight
outerWidth	返回窗口的外部宽度。（包含工具条与滚动条）	window.outerWidth
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。	window.pageXOffset
pageYoffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。	window.pageYOffset
parent	返回当前窗口的父窗口。	window.parent
screen	管理屏幕（详情见下文）
screenLeft	返回相对于屏幕窗口的x坐标	window.screenLeft
screenTop	返回相对于屏幕窗口的y坐标	window.screenTop
screenX	返回相对于屏幕窗口的x坐标	window.screenX
screenY	返回相对于屏幕窗口的y坐标	window.screenY
sessionStorage	在浏览器本地存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。	window.sessionStorage
self	返回对当前窗口的引用。等价于 Window 属性。	window.self
status	设置窗口状态栏的文本。	window.status
top	返回最顶层的父窗口。	window.top

【2】Window 对象方法

方法	描述	语法
alert()	显示带有一段消息和一个确认按钮的警告框。	alert(message)
atob()	解码一个 base-64 编码的字符串。	window.atob(encodedStr)  encodedStr：必需，是一个通过 atob() 方法编码的字符串。
btoa()	创建一个 base-64 编码的字符串。	window.btoa(str)  str： 必需，要编码的字符串。
blur()	把键盘焦点从顶层窗口移开。	window.blur()
clearInterval()	取消由 setInterval() 设置的 timeout。	clearInterval(timer) 调用 setInterval() 函数时所获得的返回值timer，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作
clerarTimeout()	取消由 setTimeout() 方法设置的 timeout。	clearTimeout(timer) 调用 setTimeout() 函数时所获得的返回值timer，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作
close()	关闭浏览器窗口。	window.close()
confirem()	显示带有一段消息以及确认按钮和取消按钮的对话框。	confirm(message)
createPopup()	创建一个 pop-up 窗口。	window.createPopup()
focus()	把键盘焦点给予一个窗口。	window.focus()
getSelection()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。	window.getSelection()
getComputedStyle()	获取指定元素的 CSS 样式。	window.getComputedStyle(element, pseudoElement) element：必需，要获取样式的元素。 pseudoElement：可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。
matchMedia()	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。	window.matchMedia(mediaQueryString) mediaQueryString：必需，一个字符串，表示即将返回一个新 MediaQueryList 对象的媒体查询。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。	window.moveBy(x,y)
moveTo()	相对窗口的左上角移动到一个指定的坐标。	window.moveTo(x,y)
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。	window.open(URL,name)   URL：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口   name：可选。指定target属性或窗口的名称。支持以下值： _blank - URL加载到一个新的窗口。这是默认 _parent - URL加载到父框架 _self - URL替换当前页面 _top - URL替换任何可加载的框架集 name - 窗口名称
print()	打印当前窗口的内容。	window.print()
prompt()	显示可提示用户输入的对话框。	prompt(msg,defaultText)   msg：可选。要在对话框中显示的纯文本（而不是 defaultText：HTML 格式的文本）。 可选。默认的输入文本
resizeBy()	按照指定的像素调整窗口的大小。	resizeBy(width,height) width：必需。要使窗口宽度增加的像素数。可以是正、负数值 height：可选。要使窗口高度增加的像素数。可以是正、负数值
resizeTo()	把窗口的大小调整到指定的宽度和高度。	window.resizeTo(width,height) width：必需。设置窗口的宽度，以像素为单位 height： 必需。设置窗口的高度，以像素为单位
scrollBy()	按照指定的像素值来滚动内容。	scrollBy(xnum,ynum) xnum：必需。把文档向右滚动的像素数。 ynum：必需。把文档向下滚动的像素数。
scrollTo()	把内容滚动到指定的坐标。	scrollTo(xpos,ypos) xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。	setInterval(function，milliseconds， param1，param2...) function：必需。要调用一个代码串，也可以是一个函数。 milliseconds：必须。周期性执行或调用code/function 之间的时间间隔，以毫秒计。 param： 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。	setTimeout(function，milliseconds， param1，param2...) function：必需。要调用一个代码串，也可以是一个函数。 milliseconds：可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。 param： 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）
stop()	停止页面载入。	window.stop()

二、Location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

【1】Location 对象属性

属性	描述	语法
hash	设置或返回一个URL的锚部分（从#号开始的部分）	location.hash
host	设置或返回一个URL的主机名和端口	location.host
hostname	设置或返回URL的主机名	location.hostname
href	设置返回完整的URL	location.href
pathname	设置或返回的URL路径名。	location.pathname
port	设置或返回一个URL服务器使用的端口号	location.port
protocol	设置或返回一个URL协议	location.protocol
search	设置或返回一个URL的查询部分（eg:?email=dingFY@163.com）	location.search

【2】Location 对象方法

方法	说明	语法
assign()	载入一个新的文档	location.assign(URL)
reload()	重新载入当前文档	location.reload(forceGet)可选。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。
replace()	用新的文档替换当前文档	location.replace(newURL)

三、navigator对象

Navigator 对象包含有关浏览器的信息。

【1】Navigator 对象属性

属性	说明	语法
appCodeName	返回浏览器的代码名	navigator.appCodeName
appName	返回浏览器的名称	navigator.appName
appVersion	返回浏览器的平台和版本信息	navigator.appVersion
language	返回浏览器设置的语言	navigator.language
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值	navigator.cookieEnabled
platform	返回运行浏览器的操作系统平台	navigator.platform
userAgent	返回由客户机发送服务器的user-agent 头部的值	navigator.userAgent

【2】Navigator 对象方法

方法	描述	语法
javaEnabled()	指定是否在浏览器中启用Java	navigator.javaEnabled()
taintEnabled()	规定浏览器是否启用数据污点(data tainting)	navigator.taintEnabled()

四、history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

【1】History 对象属性

属性	说明	语法
length	返回历史列表中的网址数	history.length

【2】History 对象方法

方法	说明	语法
back()	加载 history 列表中的前一个 URL，等价于history.go(-1)	history.back()
forward()	加载 history 列表中的下一个 URL等价于history.go(1)	history.forward()
go()	加载 history 列表中的某个具体页面，参数可以是数字（ URL 在 History 的 URL 列表中的相对位置）也可以是具体URL	history.go(num | URL)

五、screen对象

Screen 对象包含有关客户端显示屏幕的信息。

【1】Screen 对象属性

属性	说明	语法
availHeight	返回屏幕的高度（不包括Windows任务栏）	screen.availHeight
availWidth	返回屏幕的宽度（不包括Windows任务栏）	screen.availWidth
colorDepth	返回目标设备或缓冲器上的调色板的比特深度	screen.colorDepth
height	返回屏幕的总高度	screen.height
width	返回屏幕的总宽度	screen.width
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）	screen.pixelDepth