十一、BOM

Browser Object Model浏览器对象模型
它是JS的一个组成部分，主要是与浏览器相关的功能操作。
简单来说，就是window。
包含的功能有： 弹框、获取浏览器的尺寸、获取计算后样式、文档对象、历史记录、地址栏、打开、关闭窗口

11.1 三个弹框

window.alert 弹出警告框
window.confirm 弹出选择框
window.prompt 弹出输入框
浏览器规定“任何window的属性在使用的时候可以不写window.”

11.2 获取浏览器的尺寸

11.3 history
11.4 location

11.3 history

历史记录对象，通过它可以实现前进后退功能(页面左上角的 ← 和 →)

1. history.forward() 前进
2. history.back() 后退
3. history.go(n) 跳转n次
       1. n为正数 表示前进n次
       2. n为零 表示刷新
       3. n为负数 表示后退

11.4 location

地址栏对象，通过它可以实现页面的跳转

查看该对象(当前url为 https://www.baidu.com?a=1&b=2&c=3#ccc)

1. location.href 地址栏的全部字符串内容

   1. 获取当前地址栏的内容

   2. 设置新地址

      location.href = 'https://www.baidu.com' 跳转到百度

   3. location.assign(url) 跳转方法

      1. url 新地址

         location.assign('https://www.baidu.com') 跳转到百度

   4. location.search 查询串部分

      location.search // ?a=1&b=2&c=3

2. location.hash 哈西部分

   location.hash // #ccc

3. origin 源

   location.origin // https://www.baidu.com

4. port 端口

   location.port // 无(url中如果不写，默认是80端口)

5. host 主机名

   location.host // www.baidu.com

6. protocol 协议

   location.protocol // https:

11.5 open

window.open(url); 用于打开一个新的页面。

11.6 close

window.close(); 用于关闭当前页面(不一定关得掉)

11.7 getComputedStyle

window.getComputedStyle(dom)  获取计算后样式<br />        dom: 元素<br />    返回值：元素的计算后样式对象<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/2347288/1610010752261-86da97f3-9a13-4048-bbc7-f33ee80b3195.png#align=left&display=inline&height=122&margin=%5Bobject%20Object%5D&name=image.png&originHeight=122&originWidth=683&size=79748&status=done&style=none&width=683)<br />获取元素的计算后属性

var cssObj = window.getComputedStyle(box)
console.log(cssObj.display) // 获取display属性
console.log(cssObj.backgroundColor) // css中的带-的属性 我们在js中要去掉- 并把后面的首字母转大写
console.log(cssObj['background-color']) // 或者使用方括号语法

注：只能在高级浏览器中使用
**解决方案：能力检测**
这种通过判断一个对象是否有某一个属性的方式，叫做检测对象的能力，也叫作能力检测

function getCss(yuansu, shuxing) { 
  if (window.getComputedStyle) {
    return window.getComputedStyle(yuansu)[shuxing]
  } else {
    return yuansu.currentStyle[shuxing]
  }
}