一、什么是BOM
BOM：Browser Object Model
BOM:浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象结构。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
| window | 表示浏览器中打开的窗口 | 重点 |
| location | 浏览器当前URL信息 | 有用 |
| history | 用户在浏览器窗口中访问过的 URL | 有点用 |
| navigator | 浏览器本身信息 | 很少用 |
| screen | 客户端屏幕信息 | 很少用 |
二、BOM对象
1、window对象
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| screenY | 返回相对于屏幕窗口的y坐标 |
常见的window对象方法：
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| prompt() | 显示可提示用户输入的对话框。 |
| getSelection() | 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 |
| getComputedStyle() | 获取指定元素的 CSS 样式。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。（无限循环） |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。（延时函数，只执行一次） |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| requestAnimationFrame() | 类似于setTimeout()的时间函数 |
| clearAnimationFrame() | 取消requestAnimationFrame() |
注：最后两对时间函数最重要、用得最频繁，基本页面所有的动态效果都要依赖时间函数。
然后，很多时候requestAnimationFrame()比setTimeout()更好一些，为了动画而生，一般不设置时间，它是根据屏幕的刷新率来确定时间，和屏幕的刷新时间一致，能更加友好的契合浏览器，性能更高，动画相关优先考虑，使用方法：
//设置一个开关 let timer； function animation1（）{ console.log("你好")； timer = requestAnimationFrame(animation1); } //打印一次过后，延迟一个屏幕刷新率的时间，再次调用打印，再延迟... //类似于 function animation2（）{ console.log("你好")； setTimeout(animation2,1000); } //关闭 cancelAnimationFrame(timer);
另，JS的特性是：非阻塞异步单线程，alert()、confirm()、prompt()三个弹窗函数是阻塞性的（会卡住，代码不继续执行），对JS不友好，慎用。
2、location对象
location对象包含有关当前 URL 的信息。
常用属性和方法：
window.location.href; 获取当前地址栏的地址
window.location.href = “http://www.baidu.com”; 设置当前地址栏的地址：跳转
window.location.reload(); 刷新
window.location.reload(true); 强制刷新
window.location.assign(url) 加载 URL 指定的新文档，可以点击后退返回上一个页面。
window.location.replace(url) 加载 URL 指定的文档来替换当前文档，没有后退返回上一页。
注：可以省略 window.
3、history对象
history 对象包含用户（在浏览器窗口中）访问过的 URL。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
常用属性和方法：
window.history.length; 返回历史记录中URL的数量
window.history.forword(); 上一步，前一个 URL
window.history.back(); 下一步，下一个 URL
window.history.go(0); 接收参数 0 表示刷新当前页面
window.history.go(2); 接收正整数 表示前进2个页面
window.history.go(-2); 接收负整数 表示后退2个页面
注：可以省略 window.
4、screen对象
screen对象包含有关客户端显示屏幕的信息。
常用属性和方法：
screen.availWidth 返回屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
screen.availHeight 返回屏幕的高度，以像素计，减去界面特性，比如窗口任务栏
screen.width 返回屏幕的总宽度
screen.height 返回屏幕的总高度
注：已省略window.
5、navigator对象
navigator对象包含有关浏览器的信息。
常用属性和方法：
navigator.appName 返回浏览器的名称
navigator.appVersion 返回浏览器的平台和版本信息
navigator.platform 返回运行浏览器的操作系统平台
注：已省略window.