1. 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM与DOM

2. BOM的构成

3. 顶级对象window

window对象是浏览器的顶级对象，它具有双重角色

1. 它是JS访问浏览器窗口的一个接口

2. 它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法

   在调用的时候可以省略window

3. window对象有一个特殊属性name

4. window对象的常见事件

页面（窗口）加载事件:**

• window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

调整窗口大小事件：
window.onresize 是调整窗口大小加载事件

• 只要窗口大小发生像素变化，就会触发这个事件
  
• 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
  

<script>
        // 注册页面加载事件
        window.addEventListener('load', function() {
            let div = document.querySelector('div')
              // 注册调整窗口大小事件
            window.addEventListener('resize', function() {
                // window.innerWidth 获取窗口大小
                console.log('变化了')
                if (window.innerWidth <= 800) {
                    div.style.display = 'none'
                } else {
                    div.style.display = 'block'
                }
            })
        })
    </script>
    <div></div>

5. navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值

6. history对象

**window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。**

7. location对象