浏览器对象模型

Posted zai1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器对象模型相关的知识,希望对你有一定的参考价值。

                                                                                                                     浏览器对象模型
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的失效时间设置在过去的某个时间过期即可。

以上是关于浏览器对象模型的主要内容,如果未能解决你的问题,请参考以下文章

JS DOM(文档对象模型)与BOM(浏览器对象模型)

浏览器对象模型

JavaScript Window - 浏览器对象模型

浏览器对象模型--BOM

BOM(浏览器对象模型)

JavaScript----BOM(浏览器对象模型)