BOM—浏览器对象模型

　　●BOM(Browser Object Model)： 浏览器对象模型

　　●其实就是操作浏览器的一些能力，说的直白一点儿就是浏览器提供了一套操作浏览器的属性和方法，让操作浏览器更加方便

　　●我们可以操作哪些内容

　　○获取一些浏览器的相关信息(窗口的大小)

　　○操作浏览器进行页面跳转

　　○获取当前浏览器地址栏的信息

　　○操作浏览器的滚动条

　　○浏览器的信息(浏览器的版本)

　　○让浏览器出现一个弹出框(alert / confirm / prompt)

　　○...

　　●BOM 的核心就是 window 对象。也就说window是BOM的最高级对象

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

　　●在书写的时候window可以省略不写比如：正常写法：window.alert()简写alert()

　　获取浏览器可视窗口的尺寸

　　●innerHeight 和 innerWidth

　　●这两个方法分别是用来获取浏览器可视窗口的宽度和高度(包含滚动条的)

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

 　　浏览器的弹出层

　　提示框 alert

　　●alert 是在浏览器弹出一个提示框

　　●语法：window.alert(提示内容)

　　●返回值：没有返回值，结果是undefined

window.alert('我是一个提示框')

 　　●这个弹出层只是一个提示内容，只有一个确定按钮

　　●点击确定按钮以后，这个提示框就消失了

　　选择框 confirm

　　●confirm 是在浏览器弹出一个询问框(选择框)

　　●这个弹出层有一个询问信息和两个按钮

　　●语法：window.confirm(提示的文本信息)

　　●返回值：是一个布尔值

　　○当你点击确定的时候，就会得到 true

　　○当你点击取消的时候，就会得到 false

var boo = window.confirm('我是一个询问框')
console.log(boo)

 　　输入框 prompt

　　●prompt 是在浏览器弹出一个输入框

　　●这个弹出层有一个输入框和两个按钮

　　●语法：window.prompt(提示信息)

　　●返回值：

　　○当你点击取消的时候，得到的是 null

　　○当你点击确定的时候得到的就是你输入的内容

　　○注意：不管输入框中的内容是什么结果都是一个字符串类型

var str = window.prompt('请输入内容')
console.log(str)

 　　浏览器的地址信息

　　●在 window 中有一个对象叫做 location

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

　　●也就是说location是javascript里面管理地址栏的内置对象.

　　location.href 属性

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

　　●herf是一个读写属性，就是可读取也可以设置

　　○读

　　浏览器的地址信息

　　●在 window 中有一个对象叫做 location

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

　　●也就是说location是javascript里面管理地址栏的内置对象.

　　location.href 属性

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

　　●herf是一个读写属性，就是可读取也可以设置

　　○读

　　■语法：window.location.herf

　　■就是当前页面的地址栏完整信息

　　■注意：拿到的是 url 编码格式的地址

　　○写

　　■语法：window.location.href = '地址'

　　■修改当前地址栏的地址

console.log(window.location.href)

//file:///G:/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/02_%E7%AC%AC%E4%BA%8C%E5%91%A8/05_DAY/03_%E4%BB%A3%E7%A0%81/16_%E5%87%86%E5%A4%87.html

 　　●会把中文变成 url 编码的格式

　　●location.href 这个属性也可以给他赋值

// 这个就会跳转页面到后面你给的那个地址
window.location.href = './index.html'
//这样会跳转到百度页面
window.location.href = 'https://www.baidu.com'

 　　location.reload 方法

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

　　●语法：window.location.reload()

　　window.location.reload()

　　●注意： 不要写在全局，不然浏览器就会一直处在刷新状态

上一篇

JavaScript全解析——数据操作

下一篇

JavaScript全解析——常见的BOM操作(下)