浏览器对象模型

Posted 2022-09-20 tcq43356

浏览器对象模型
浏览器引NavaScript
直接在html文件中引入
调用外部JS文件
使用a标记的href属性
事件里面直接书写JS代码
BOM基本介绍
什么是BOM?
一般来讲，在BOM中大致存在如下几个对象:
●window: 表示窗口对象
●navigator: 包含浏览器相关信息
●location: 包含当前页面的位置信息
●history: 包含用户访问页面的历史信息
●screen: 包含客户端显示能力信息
●document: 表示整个页面
BOM与DOM的关系?
DOM可以算是BOM的一个分支。因为BOM里面存在一个叫做Document的对象，但是这个对象的属性和方法太多了，所以W3C将其单独取了出来，做成了一套规范。
window对象
window对象基本介绍
全局属性和window属性的区别
var和window对象的属性真的就是一模一样么?
也不是，还是有稍微不同的地方，那就是不能使用delete操作符删除用var声明的变量，但是如果是window的属性就可以使用delete 操作符来进行删除。
let以及const所声明的变量
使用ES6新提供的let和const所声明的变量不会成为window对象的属性。
常见属性
1.窗口大小
关于窗口大小的属性有两组，innerWidth ，innerHeight 以及outerWidth ，outerHeight
区别在于: inner那- 组表示的是页面视图区的大小，而outer那一 组表示的是浏览器窗口本身的尺寸。
我们除了通过innerWidth，innerHeight来获取页面视图区的大小以外，还可以通
过document . documentElement.clientWidth以及document. documentElement. clientHeight来获取页面视图区的大小。
属性、描述
innerWidth
返回窗口的文档显示区的宽度(IE不支持)
innerHeight
返回窗口的文档显示区的高度(IE不支持)
document.documentElement.clientWidth
返回窗口的文档显示区的宽度(通用方法)
document.documentElement.clientHeight
返回窗口的文档显示区的宽度(通用方法)
2.窗口位置
窗口位置的属性也是有两组，分别是screenLeft 和screenTop，还有screenX 和screenY这两组属性都是表示窗口相对于屏幕左边和上边的位置。
属性、描述
screenX
返回浏览器相对于屏幕窗口的x坐标(E不支持)
screenY
返回浏览器相对于屏幕窗口的y坐标，即距离浏览器最顶端(IE不支持)
screenLeft
返回浏览器相对于屏幕窗口的x坐标
screenTop
返回浏览器相对于屏幕窗口的y坐标(在IE中这个坐标包括了工具栏+菜单栏+地址栏的高度)
3.元素位置
我们可以通过offsetLeft以及offsetTop来得到一个元素在页面中的位置，位置的信息是不带单位的。
4.元素大小
我们还可以通过offsetWidth和offsetHe ight来得到一个元素的宽高。
5.滚动位置
通过pagexoffset和pageYoffset属性我们可以获取文档在窗口左上角水平和垂直方向滚动的像素。
需要注意的是，pageXoffset和pageYoffset属性相等于scrollx 和scrollY属性。这些属性都是只读属性。
常用方法
1.系统提示框
alert() :用于显示带有一条指定消息和一个确定按钮的警告框。
2.窗口大小调整(有问题)
2.窗口大小调整(有问题)
关于窗口大小，也有一组方法， resizeTo()和resizeBy()
resizeTo() :将浏览器窗口调整到指定的值
resizeBy() :相对于原来的浏览器窗口来进行调节
3.窗口位置移动
4.打开和关闭窗口
open()方法:使用window. open()方法，该方法有4个参数。
子主题 2
close（）：在调用了window对象的open()方法以后，他会返回一个对象，可以调用这些对象的方法，其中就有一个close()方法。
opener（）：保存着打开它的原始窗口对象。
5.定时函数
间歇调用
setInterval()与clearInterval() :这两个方法可以说是一组方法， 前面是设定指定的时间。
setInterval()语法如下:setInteral(函数名，间隔时间)其中间隔时间以毫秒来计算，1000毫秒为1秒。该方法会返回-个id值，这个id值可以用于停止重复调用。
clearInterval()语法如下:clearlnterval（id）：作用是清除设置的间歇调用。
超时调用
setTimeout()和clearTimeout() :这两个也可以算是一组方法， 前面是设定指定的时间周期后调用某个函数，而后面的方法是清除前面的设定。
setTimeout()语法如下:setlnterval(函数名，间隔时间)其中间隔时间也是指代的毫秒数，但是这个毫秒数的含义是执行代码前需要等待的毫秒数。该方法也会返回一个id, 可用于clearTimeout。
clearTimeout()语法如下:clearInterval（id）：作用是清除设置的超时调用。
navigator对象
navigator对象属性
属性、描述
appCodeName、返回浏览器的代码名
appMinorVersion、返回浏览器的次级版本
appName、返回浏览器名称
appVersion、返回浏览器的平台和版本信息
browserl anguage、返回当前浏览器的语言
cookieEnabled、返回指明浏览器中是否启动cookie的布尔值
cpuClass、返回浏览器系统的CPU等级
onL ine、返回指明系统是否处于脱机模式的布尔值
platform、返回运行浏览器的操作系统平台
systemL anguage、返回OS使用的默认的语言
userAgent、返回由客户机发送服务器的user- agent头部的值
userL anguage、返回OS的自然语言设置
location对象
常见属性
属性、描述
hash 、返回一个URL的锚部分
host 、返回一个URL的主机名和端口
hostname 、返回URL的主机名
href 、返回完整的URL
pathname 、返回的URL路径名
port 、返回一个URL服务器使用的端口号
protocol 、返回一个URL协议
search 、返回一个URL的查询部分
●hash: 如果URL中包含有“#"， 该方法将返回该符号之后的内容例如: http:/ /ww. sunchis. com/ index. html#welcome的hash是#welcome
●host:服务器的名字，例如www. sunchis. com
●hostname: 通常等于host，有时会省略前面的www
●href: 当前页面载入的完整URL。
●pathname: URL中主机名之后的部分。例如: http://www. sunchis . com/html/js/jsbasic/2010/0319/88. html的pathname是/html/js/j sbasic/2010/0319/88.html。
●port: URL中声明的请求端口。默认情况下，大多数URL没有端口信息(默认为80端口)，所以该属性通常是空白的。像http: //www. sunchis. com:8080/index. html这样的URL的port属性为8080
●protocol: URL中使用的协议，即双斜杠(/) 之前的部分。例如http://www. sunchis . com中的protocol属性等于http:, ftp://ww. sunchis. com的protocol属性等于ftp:
●search: 执行GET请求的URL中的问号(?) 后的部分，又称查询字符串。例
如http://www. sunchis. com/search. html?tern=sunchis中search属 性为?
term=sunchis
常见方法
location对象中常见方法、说明
assign（） 、载入一个新的文档
reload(）、重新载入当前文档
replace（）、用新的文档替换当前文档
reload() :该方法用于重新加载当前文档。
效果:点击按钮后会刷新一下页面
assign() :该方法加载新的文档。加载URL指定的新的HTML文档。就相当于一个链接，跳转到指定的URL,当前页面会转为新页面内容，可以点击后退返回上一个页面。
replace():该方法可用一个新文档取代当前文档。通过加载URL指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的。
跳转的方式
●location.href
●window.location
●location
●location.assign0
●location.replace0)
history对象
常见属性
length ：返回浏览器历史列表中URL的数量
常见方法
方法、描述
back（）：加载history列表中的前一个URL
forward(）：加载history列表中的下一个URL
go（):加载history列表中的某个具体页面
window.history.go0方法可以用来导航到指定的页面，0代表是当前页面
还有window. history. forward()和window. history. back()方法可以分别用来向前或者回退一个页面，就像浏览器的前进和后退按钮一样。
screen对象
属性 说明
height：屏幕的像素高度
width：屏幕的像素宽度
availHeight：屏幕的像素高度减去系统部件高度之后的值(只读)
availWidth：屏幕的像素宽度减去系统部件宽度之后的值(只读)
left：当前屏幕距左边的像素距离firefox返回0, chrome和IE不 支持]
top：当前屏幕距上方的像素距离firefox返回0, chrome和IE不支持]
availLeft：未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0, IE不支持]
avilTop：未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0, IE不支持]
bufferDepth：读、写用于呈现屏外位图的位数[E返回0, chrome和firefox不支持]
colorDepth：用于表现颜色的位数(只读)[E8返回32,其他浏览器返回24]
pixelDepth：屏幕的位深(只读)[1E8-不支持，其他浏览器返回24]
deviceXDPI：屏幕实际的水平DPI(只读)IE返回96, chrome和firefox不支持]
deviceYDPI：屏幕实际的垂直DPI(只读)IE返回96, chrome和firefox不支持]
logicalXDPI：屏幕逻辑的水平DPI(只读)1E返回96, chrome和firefox不支持]
logicalYDPI：屏幕逻辑的垂直DPI(只读)IE返回96, chrome和firefox不支持]
updatelnterval：读、写以毫秒表示的屏幕刷新时间间隔[E返回0, chrome和firefox不支持]
fontSmoothingEnabled：是否启用了字体平滑(只读E返回true, chrome和firefox不支持
document对象
效果:点击前
L orem ipsum dolor sit amet.
按钮点击
点击后
this is a testthis is a test,too
1.创建cookie :要创建一. 个cookie,只需要将要保存的信息赋给document.cookie属性即可.
2.修改cookie :如果要修改cookie的值也非常简单，只需要对已有的键重新赋值就可以了。
3.读取cookie ;读取cookie只需要键入document.cookie即可，这个前面已经用过了。我们可以使用split0方法将cookie的字符串拆分成数组，然后使用for-of进行循环遍历.
4. cookie失效时间 :cookie默认是会话的cookie,也就是说，一旦浏览器会话完成(也就是用户关闭浏览器标签页或者窗口时，cookie就 会被刪除。不过，cookie可 以变成持久的，只需在设置cookie的时候，在cookie末尾添加‘; expires=日期值‘来设置失效日期即可.
5. cookie的路径和域 :默认情况下，cookie只能 通过与设置它的文件在相同的目录和域中的页面来读取。这是出于安全的原因，所以访问cookie是有限制的。路径可以进行修改。例如我们要让根目录中的任何页面都可以读取cookie。可以通过在设置cookie时，在cookie的末尾 添加; path=/ 来实现.
6.保护cookie安全 :这个也非常简单，在一个cookie的未尾 添加上字符串; secure’即可，这样可以确保它只能通过安全的HTTPS网络来进行传输.
7.删除cookie :要删除一个cookie的方法非常简单,只需要将cookie的失效时间设置在过去的某个时间过期即可。