BOM 浏览器对象

一、- BOM（Browser Object Model）： 浏览器对象模型

- BOM 的核心就是 window 对象

- window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

1、获取浏览器窗口的尺寸

- ` innerHeight` 和 `innerWidth`

- 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

2、 `alert` 是在浏览器弹出一个提示框

3、 `confirm` 是在浏览器弹出一个询问框

4、 `prompt` 是在浏览器弹出一个输入框

5、浏览器的地址信息

- 在 window 中有一个对象叫做 `location`

- 就是专门用来存储浏览器的地址栏内的信息的

①、`location.href` 这个属性存储的是浏览器地址栏内 url 地址的信息

②、`location.reload()` 这个方法会重新加载一遍页面，就相当于刷新是一个道理

③、`location.hash `获取地址栏的哈希值  ： 地址栏#后面的内容

window.location.hash="字符串"     设置

window.location.hash     获取

就是不跳转页面   只是切换页面  spa 单页面应用

6、浏览器的历史记录

- window 中有一个对象叫做 `history`

- 是专门用来存储历史记录信息的

①、`history.back` 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮

②、`history.forword` 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮

7、浏览器的版本信息（了解）

- window 中有一个对象叫做 `navigator`

- 是专门用来获取浏览器信息的

①、`navigator.appName` 获取的是浏览器的名称

②、 `navigator.appVersion` 获取的是浏览器的版本号

③、 `navigator.platform` 获取到的是当前计算机的操作系统

8、浏览器的 onload 事件

- 这个不在是对象了，而是一个事件

- 是在页面所有资源加载完毕后执行的

看些在哪儿js是一个从上往下的执行

9、浏览器的 onscroll 事件

- 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发

- 或者鼠标滚轮滚动的时候出发

注意：**前提是页面的高度要超过浏览器的可是窗口才可以**

10、scrollTop

- 获取的是页面向上滚动的距离

 IE 浏览器

      - 没有 `DOCTYPE` 声明的时候，用这两个都行

      - 有 `DOCTYPE` 声明的时候，只能用 `document.documentElement.scrollTop`

    - Chrome 和 FireFox

      - 没有 `DOCTYPE` 声明的时候，用 `document.body.scrollTop`

      - 有 `DOCTYPE` 声明的时候，用 `document.documentElement.scrollTop`

    - Safari

      - 两个都不用，使用一个单独的方法 `window.pageYOffset `