JavaScript中的浏览器对象模型
浏览器对象模型
1.浏览器引入JavaScript
1.直接在HTML文件中引入
首先第1种方式就是直接在HTML文档里面引入JavaScript代码。在维护一些老项目的时候，经常 可以看到J avaScript代码是写在<title>标签下面的，并且通过一对<script>标签来引入代 码
但是，如果是直接在HTML文件中引入JavaScript代码，我们一般不写在vtitle>标签下面，更 加优化的一种方式是将<sc ript>标签写在<body>标签的最小面，这样可以更快的加载出页面 效果。
2.调用外部JS文件
第2种方式是使用外部链接的方式来调用外部的JS文件。这种方式适用于当我们的JavaScript代 码是单独的一个js文件时，就可以采用这种方式来引入JavaScript代码。
3使用a标记的href属性
我们还可以在<a>标签的href属性里面书写JavaScript代码，这样会改变<a>标签默认的超链 接特性，而变为执行这段JavaScript代码，
4事件里面直接书写JS代码
直接将JavaScript代码写在事件里面，例如我们书写一个点击 事件，当点击button按钮时，会执行相应的J avaScript代码
2. BOM基本介绍
1什么是BOM
所谓BOM,英语全称为Browser Object Model，翻译成中文为浏览器对象模型。我们的浏览 器，可以被看做是由各种各样的对象所组成
在BOM中大致存在如下几个对象：
•window:表示窗口对象
•navigator：包含浏览器相关信息
•location：包含当前页面的位置信息
•history :包含用户访问页面的历史信息
•screen：包含客户端显示能力信息
•document:表示整个页面
整个BOM的核心对象就是是window对象，它代表的是浏览器的一个实例。window对象同时也是 最顶层的对象。
2 BOM与DOM的关系
在下一章，我们还会介绍一个东西，被称之为DOM。很多初学者刚开始都搞不清楚BOM和DOM 之间的关系，事实上很简单，DOM可以算是BOM的一个分支。因为BOM里面存在一个叫做 Documen啲对象，但是这个对象的属性和方法太多了，所以W3C将其单独取了出来，做成了一 套规范，这个就是DOM,英语全称document object model，翻译成中文就是文档对象模型。
需要说明一下的是BOM目前还没有相应的规范。浏览器提供商会按照各自的想法去随意扩展 它，于是浏览器之间共有的对象就成了事实上的标准。这些对象在浏览器中得以存在，很大程度 上是由于它们提供了与浏览器的互操作性。目前，W3C已经将BOM的主要方面纳入了HTML5的 规范中。
3 .window 对象
1 window对象基本介绍
浏览器每打开一个窗口，就包含了一个window对象。window对 象是整个BOM的核心对象，它代表着一个浏览器窗口的实例。
window对象扮演着在ES中的globa I对象的角色，因此所有在全局作用域中声明的变量以及函数 都会成为该对象的属性和方法。也就是说全局变量是window对象的属性，全局函数是window对 象的方法。
通过访问window.a和window.test()也可以打印出a变量的值和调
用test()函数。
全局属性和window属性的区别
var和window对象的属性真的就是一模一样么？
也不是，还是有稍微不同的地方，那就是不能使用delete操作符删除用var声明的变量，但是如 果是window的属性就可以使用delete操作符来进行删除。
let以及const所声明的变量
还需要注意的是，使用ES6新提供的let和const所声明的变量不会成为window对象的属性
2常见属性
1.窗口大小
关于窗口大小的属性有两组，innerWidth , innerHeight 以及 outerWidth , outerHeight 区别在于：inner那一组表示的是页面视图区的大小，而outer那一组表示的是浏览器窗口本身的 尺寸
但是，不同的浏览器，所表示的值略微有差异。
我们除了通过inne rWidth , inne rHeight来获取页面视图区的大小以外，还可以通 过 document.documentElement.clientWidth 以
及document.documentElement.clientHeight来获取页面视图区的大小，
innerWidth 返回窗口的文档显示区的宽度（IE不支持
innerHeight 返回窗口的文档显示区的高度（IE不支持）
document.documentElement.clientWidth 返回窗口的文档显示区的宽度（通用方法）
document.documentElement.clientHeight 返回窗口的文档显示区的宽度（通用方法）
2.窗口位置
2.窗口位置的属性也是有两组，分别是scr eenLeft和scr eenTop，还有scr eenX和scr eenY
这两组属性都是表示窗口相对于屏幕左边和上边的位置
区别在于screenX和screen Y属性最早是火狐浏览器里面特有的属性。但是上面的代码是在谷歌浏 览器里面运行的，可以看到，现在这两组属性在很多浏览器里面都是通用的了。接下来我将上面 两组属性的区别总结成下面的表格
screenX 返回浏览器相对于屏幕窗口的x坐标（IE不支持）
screenY 返回浏览器相对于屏幕窗口的y坐标，即距离浏览器最顶端（IE不支持）
screenLeft 返回浏览器相对于屏幕窗口的x坐标
screenTop 返回浏览器相对于屏幕窗口的y坐标（在IE中这个坐标包括了工具栏+菜单栏+地址栏的高度）
3.元素位置
通 过offsetLeft以及offsetTop来得到一个元素在页面中的位置，位置的信息是不带单位的
4.元素大小
通过offsetwidth和offsetHeight来得到
—个元素的宽高
5.滚动位置
通过pageXOffset和pageYOffset属性我们可以获取文档在窗口左上角水平和垂直方向滚动的像素。
需要注意的是，pageXOffset和pageYOffset属性相等于scrollX和scrollY属性。这些属 性都是只读属性。
3常用方法
1.系统提示框
alert():用于显示带有一条指定消息和一个确定按钮的警告框。
2.窗口大小调整(有问题)
resizeTo()和resizeBy() r esizeTo():将浏览器窗口调整到指定的值
r esizeBy():相对于原来的浏览器窗口来进行调节
3.窗口位置移动(不使用，不学习)
window对象里面提供了 moveTo()和moveBy()
4.打开和关闭窗口
open()方法：使用window.open()方法，该方法有4个参数
浏览器一般都是会阻止弹窗的。一般需要我们点击允许弹出后，才弹出2.htm I页 面
在调用了 window对象的open()方法以后，他会返回一个对象，可以调用这些对象的方法，其 中就有一个close()方法，
还有一个opener属性，保存着打开它的原始窗口对象
5.定时函数
间歇调用
setInterval()与clearInterval():这两个方法可以说是一组方法，前面是设定指定的时间 周期调用某个函数，而后面的方法则是清除前面的设定
setInterval()语法如下：
setinterval(函数名，间隔时间)
其中间隔时间以毫秒来计算，1000毫秒为1秒。该方法会返回一个id值，这个id值可以用于停止 重复调用。
clearInterval()语法如下：
clearinterval(id)
作用是清除设置的间歇调用
超时调用
setTimeout()和clearTimeout():这两个也可以算是一组方法，前面是设定指定的时间周期 后调用某个函数，而后面的方法是清除前面的设定。
setTimeout()语法如下：
setinterval(函数名，间隔时间)
其中间隔时间也是指代的毫秒数，但是这个毫秒数的含义是执行代码前需要等待的毫秒数。该方
法也会返回一个 id,可用于clearTimeout
clearTimeout()语法如下：
clearinterval(id)
作用是清除设置的超时调用
4. navigator 对象
1 navigator 对象介绍
navigator对象包含浏览器和运行浏览器的操作系统的大量信息。例如操作系统版本，浏览器类型 和版本等信息。很多时候我们需要在判断网页所处的浏览器和平台，navigator对象为我们提供了 便利。
2 navigator 对象属性
appCodeName 返回浏览器的代码名
appMinorVersion 返回浏览器的次级版本
appName 返回浏览器名称
appVersion 返回浏览器的平台和版本信息
browserLanguage 返回当前浏览器的语言
cookieEnabled 返回指明浏览器中是否启动cookie的布尔值
cpuClass 返回浏览器系统的CPU等级
onLine 返回指明系统是否处于脱机模式的布尔值
platform 返回运行浏览器的操作系统平台
systemLanguage 返回OS使用的默认的语言
userAgent 返回由客户机发送服务器的user-agent头部的值
userLanguage 返回OS的自然语言设置
5. location 对象
location对象提供了当前窗口中加载的文档的有关信息。这个对象有点特别，它既是window对象 的属性，也是document对象的属性，也就是说window.location和document.location调用 的是同一个对象
1常见属性
hash 返回一个URL的锚部分
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回的URL路径名
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分
2常见方法
assign（） 载入一个新的文档
reload（） 重新载入当前文档
replace（） 用新的文档替换当前文档
reload():该方法用于重新加载当前文档
assign():该方法加载新的文档。
replaced :该方法可用一个新文档取代当前文档
那么这两个方法的区别是什么呢？
assign()方法：加载URL指定的新的HTML文档。就相当于一个链接，跳转到指定的URL, 当前页面会转为新页面内容，可以点击后退返回上一个页面。
replaced方法：通过加载URL指定的文档来替换当前文档，这个方法是替换当前窗口页面， 前后两个页面共用一个窗口，所以是没有后退返回上一页的。
跳转的方式
最后我们来总结一下页面跳转的方式，抛开<a>标签，通过JavaScript代码来实现页面的跳转大 致有下面几种方式：
•location.href
•window.location
•location
•location.assign（）
•location.replace（）
6. history 对象
history对象用来管理当前窗口最近访问过的URL记录，这些URL记录被保存在history列表中, history对象使得脚本程序可以模拟浏览器工具栏的前进和后退按钮。
1.常见属性
length 返回浏览器历史列表中URL的数量
2.常见方法
history对象常见的方法如下表：
方法 描述
back。 加载history列表中的前一个URL
forward。 加载history列表中的下一^ URL
go。 加载history列表中的某个具体页面
window.history.go。方法可以用来导航到指定的页面，0代表是当前页面
还有window.history.forward()和window.history.back()方法可以分别用来向前或者回退 —个页面，就像浏览器的前进和后退按钮一样。
7 screen 对象
有时脚本需要获取浏览器或者显示器的一些信息，例如分辨率，有效分辨率，DPI等。这个时候 我们就可以使用scree n对象。该对象提供了一组属性，供我们来获取到这些有用的信息。
screen对象属性如下表：
属性 说明
height 屏幕的像素高度
width 屏幕的像素宽度
availHeight 屏幕的像素高度减去系统部件高度之后的值（只读）
availWidth 屏幕的像素宽度减去系统部件宽度之后的值（只读）
left 当前屏幕距左边的像素距离［firefox返回0, chrome和IE不支持］
top 当前屏幕距上方的像素距离［firefox返回0, chrome和IE不支持］
availLeft 未被系统部件占用的最左侧的像素值（只读）［chrome和firefox返回0, I E不支持］
availTop 未被系统部件占用的最上方的像素值（只读）［chrome和firefox返回0, I E不支持］
bufferDepth 读、写用于呈现屏外位图的位数［IE返回0, chrome和firefox不支持］
colorDepth 用于表现颜色的位数（只读）［IE8-返回32,其他浏览器返回24］
pixelDepth 屏幕的位深（只读）［IE8 -不支持，其他浏览器返回24］
deviceXDPI 屏幕实际的水平DPI（只读）［IE返回96, chrome和firefox不支持］
deviceYDPI 屏幕实际的垂直DPI（只读）［IE返回96, chrome和firefox不支持］
logicalXDPI 屏幕逻辑的水平DPI（只读）［IE返回96, chrome和firefox不支持］
logicalYDPI 屏幕逻辑的垂直DPI（只读）［IE返回96, chrome和firefox不支持］
updateInterval 读、写以毫秒表示的屏幕刷新时间间隔［IE返回0, chrome和firefox不 支持］
fontSmoothingEnab 是否启用了字体平滑（只读）［IE返回true, chrome和firefox不支持］
led
8 document 对象
在后面的DOM中，我们会专门介绍document相关的大量的方法。这里就先介绍一个即可。write()方法，用于将一串文本写入页面。如果页面已经加载了，它将完全替换当前的文 档。
使用document.write()书写页面的时候，原来的东西会完全被替换掉。并且我们书 写了两行东西，这里两行东西是在一行里面显示的。与document.wri te()对应的有一
个document.writeln(),这个方法就可以实现换行输出，但是这里的换行指的是代码里面会换 行，页面上仍然是显示成一行的。不过多了一个空格，因为html存在空白折叠现象。书写的新的 内容仍然会将之前的内容给替换掉。
cookie
1.创建 cookie
要创建一个cookie,只需要将要保存的信息赋值给document.cookie属性即可
2.修改 cookie
如果要修改cookie的值也非常简单，只需要对已有的键重新赋值就可以了。
3.读取 cookie
读取cookie只需要键入document.cookie即可，这个前面已经用过了。我们可以使用split。方法将 cookie的字符串拆分成数组，然后使用for-of进行循环遍历
4. cookie失效时间
cookie默认是会话的cookie，也就是说，一旦浏览器会话完成(也就是用户关闭浏览器标签页或者 窗口时)，cookie就会被删除。
不过，cookie可以变成持久的，只需在设置cookie的时候，在cookie末尾添加'；expires=日期 值'来设置失效日期即可
5. cookie的路径和域
默认情况下，cookie只能通过与设置它的文件在相同的目录和域中的页面来读取。这是出于安全 的原因，所以访问cookie是有限制的。
路径可以进行修改。例如我们要让根目录中的任何页面都可以读取cookie。可以通过在设置 cookie时，在cookie的末尾添加;path=/来实现，
除此之外，我们还可以在cookie的末尾添加；domain = domainName来设置域：
6.保护cookie安全
这个也非常简单，在一个cookie的末尾添加上字符串'；secure '即可，这样可以确保它只能通过安 全的H TTPS网络来进行传输
7.删除 cookie
要删除一个cookie的方法非常简单，只需要将cookie的失效时间设置在过去的某个时间过期即可。
- 上一篇 »Javascript核心对象
- 下一篇 »JavaScript- BOM, DOM