JS中的BOM

1.BOM概念

BOM : Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

BOM 的核心对象是 window ，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其全局对象。

2.window内置对象及方法

location对象

href属性 控制浏览器地址栏的内容

reload(true)方法 刷新页面,如果参数为true,通过缓存刷新。

history对象

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能。

history.go() 函数 – 前进或后退指定的页面数（负数后退，正数前进）

history.back() 函数 – 后退一页

history.forward() 函数 – 前进一页

history.length 属性 – history对象中缓存了多少个URL

navigator对象

userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息

3.Window相关的事件和操作

BOM的常用事件—window

onload事件：页面内容加载完成后触发此事件(DOM结构，图片等内容…)

onscroll事件：拖动浏览器的滚动条触发此事件。

onresize事件：浏览器窗口缩放所触发的事件。

可视区的宽高:浏览器内部看得见的区域。

document.documentElement.clientWidth

document.documentElement.clientHeight

滚动条距离（某些浏览器下面做兼容）

document.documentElement.scrollTop

document.documentElement.scrollLeft

scrollTo() 方法可把内容滚动到指定的坐标。

scrollTo(xpos,ypos)

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

4.定时器

setInterval(函数名称，时间)；间隔定时器(反复调用)

clearInterval( 定时器的返回值 ); 停止定时器

setTimeout(函数名称，时间); 延时定时器，执行一次

clearTimeout( 定时器的返回值 ); 停止定时器

5.综合应用

广告弹出窗(自动关闭)

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqvqyT6j-1588756308957)(C:\Users\Administrator\Desktop\第二阶段大纲\img\wps2.jpg)]

添加倒计时效果

顶部悬浮（百度新闻的导航）

回到顶部（百度新闻的回到顶部效果）

函数的节流和防抖–经典的面试题