BOM浏览器对象模型相关知识点整理

什么是BOM

BOM(Browser Object Model)浏览器对象模型，它提供了与浏览器窗口提供交互的对象，核心对象是window。

1.window对象

1.它是js访问浏览器窗口的接口
2.它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。alert()就是window下的一个方法。

1.1 window.onload

window.onload = function(){js代码}
或者
window.addEventListener("load",function(){})

1.window.onload页面加载事件，当文档内容都加载完成后才会进行调用。页面中仅最后一次window.onload生效
2.window.addEventListener("load",function(){})不受限制

1.2窗口加载事件

document.addEventListener('DOMContentLoaded',function(){})

说明：DOMContentLoaded触发时，仅DOM加载完成，不包括样式表，图片等。不用所有图片都加载完就可以执行，用户体验更好。

1.3调整窗口大小事件

window.onload = function(){}
window.addEventListener("resize",function(){})

说明：窗口大小发生变化时触发，与window.innerWidth当前屏幕的宽度搭配可实现响应式。

1.4定时器

1.setTimeout(回调函数，延迟时间（ms）)
清除定时器：clearTimeout(定时器ID)
2.setInterval(回调函数，延迟时间（ms）)
清除定时器：clearInterval(定时器ID)
区别：setTimeout延迟时间结束只执行一次，setInterval延迟时间结束循环执行

1.5 this指向

1.全局作用域和匿名函数this指向window。
2.方法中谁调用方法this指向谁。
3. 构造函数中this指向构造函数的实例。

1.6 location

location可以获取、设置和解析url，返回值为一个对象。

一个完整的url组成部分(http://www.baiduo.com:80/index.html/?name=lisi&age=18#search)

组成	说明
protocol	通信协议(http)
host	域名(www.baidu.com)
port	端口号(80)
path	路径(/index.html/)
query	参数，以键值对的形式用&分隔。(?name=lisi&age=18)
hash	#后面的内容(#search)

location属性

location对象属性	返回值
location.href	获取或设置整个url
location.host	返回域名
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回#后的内容

location方法

location方法	返回值
location.assign()	跟href一样，可以跳转页面
location.replace()	替换当前页面，不记录历史，所以不能后退。
location.reload()	重新加载页面

navigator对象

navigator是关于浏览器的相关信息，常用user-agent属性可判断用户浏览器信息，包括手机端和PC端的信息。

history对象

浏览器历史记录进行交互

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	1为前进一个页面 -1为后退一个页面