1. 什么是bom
BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象:是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准, JavaScript语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。
BOM
- 浏览器对象模型
- 把「浏览器」当做一个「对象」来看待
- BOM 的顶级对象是window
- BOM学习的是浏览器窗口校互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
BOM比DOM更大,它包含DOM.
window对象是浏览器的顶级对象,它具有双重角色。
1.它是JS访问浏览器窗口的一个接口。
2.它是一个全局对象。定义在全局作用域中的变业函数都会变量window对象的属性和方法。
在调用的时候可以省略window ,前面学习的对话框都属于window对象方法,如alert0、prompt0等。
注意: window下的一个特殊属性window.name
2.window常见事件
2.1窗口加载事件
window.onload = function() {}
或者
window.addEventListener ("load" , function() {}) ;
window.onload是窗口(页面)加载事件当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
文件等),就调用的处理函数。
注意:
1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,
再去执行处理函数。
2. window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。
3.如果使用addEventListener则没有限制。
2.2调整窗口大小事件
window.onresize = function() {}
window.addEventListener ("resize", function() ({});
window. onresize是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:
1.只要窗口大小发生像素变化,就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度
3.location对象
3.1什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为
这个属性返回的是一个对象,所以我们将这个属性也称为location对球。
3.2 URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有
一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
3.3location对象的属性
3.4location对象的方法
4.navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客
户机发送服务器的user-agent头部的值。
5.history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)
访问过的URL。