JavaScript——BOM（浏览器对象模型）

目录

前言

一、BOM简介

二、window对象

1、window常用的对象属性

2、window对象常用方法

三、location对象

1、location常用的对象属性

2、location对象常用方法

四、navigator对象

1、navigator常用的对象属性

2、navigator对象常用方法

五、history对象

1、history常用的对象属性

2、history对象常用方法

---

前言

之前在初学JavaScript的时候，知道了  JavaScript的组成  有三部分：

• 核心（ECMAScript）：提供语言的语法和基本对象；
• 文档对象模型（DOM）：提供处理网页内容的方法和接口；
• 浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。

一、BOM简介

BOM（Browser Object Model ）：是浏览器对象模型，它提供了独立于内容，而与浏览器窗口进行交互的对象，其核心对象是  window  。

BOM和DOM的区别：

• DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。
• BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。

BOM的顶级对象是window，它的构成如下图所示。

二、window对象

window对象表示浏览器中打开的窗口，它是JavaScript层级中的顶层对象。

如果文档包含框架（frame或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。

1、window常用的对象属性

属性	说明
window	包含了对窗口自身的引用。等价于self属性。
self	返回对当前窗口的引用。等价于 Window 属性。
closed	返回窗口是否已被关闭。
top	返回最顶层的先辈窗口。
status	设置窗口状态栏的文本。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screenLeft	只读整数。声明了窗口的左上角在屏幕上的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。
screenTop	同上
screenX	同上
screenY	同上
defaultStatus	设置或返回窗口状态栏中的默认文本。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
name	设置或返回窗口的名称。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。

2、window对象常用方法

方法	说明
onload()	当页面完全加载到浏览器上时，触发该事件。
onscroll()	当窗口滚动时触发该事件。
onresize()	当窗口大小发生变化时触发该事件。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearTimeout()	取消由setTimeout()方法设置的定时器。
vlearInterval()	取消由setInterval()设置的定时器。

三、location对象

window.location对象是用于获得当前页面的地址（URL），并把浏览器重定向到新的页面。在编写时不可使用window这个前缀。

因此，我们先来简单了解一下URL的组成，见下表。

组成	说明
protocol	网络协议，常用的网络协议有http,ftp,mailto等
host	服务器的主机名，如www.example.com
port	端口号，可选，省略时使用协议默认端口，如http默认端口是100
path	路径，如”/html/index.html“
query	参数，键值对的形式，通过"&"符号分隔，如"a=1&b=2"

1、location常用的对象属性

属性	说明
location.search	返回（或设置）当前URL的查询部分（“?”之后的部分）。
location.hash	返回一个URL的锚部分（从“#”开始的部分）。
location.host	返回一个URL的主机名和端口。
location.hostname	返回URL的主机名。
location.href	返回完整的URL。
locatiom.pathname	返回URL的路径名。
location.port	返回一个URL服务器使用的端口号。
location.protocol	返回一个URL协议。

2、location对象常用方法

方法	说明
assign()	载入一个新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档，覆盖浏览器当前记录。

四、navigator对象

window.navigator对象包含有关访问者浏览器的信息，常用于导航，操作浏览器。在编写时可不使用 window 这个前缀。

1、navigator常用的对象属性

属性	说明
appCodeName	返回浏览器的内部名称。
appName	返回浏览器的完整名称。
appVersion	返回浏览器的平台和版本信息。
cookieEnabled	返回指明浏览器中是否启用Cookie的布尔值。
platform	返回运行浏览器的操作系统平台。

2、navigator对象常用方法

方法	说明
javaEnabled()	指定是否在浏览器中启用Java

五、history对象

window.history 对象记录了浏览器的访问历史。为了保护用户隐私，对JavaScript访问该对象的方法做出了限制。

1、history常用的对象属性

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

2、history对象常用方法

方法	说明
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载history列表中的某个具体页面