BOM:Browser Object Model浏览器对象模型，在bom中给我们提供了一整套可以操作浏览器的属性和方法
浏览器的部分（一般都是css不能操作的）
BOM操作中统一语法都是：window.XXX
但是其实一般写代码的时候这个window是可以忽略不写
比如我们之前学习过的了alert这个东西其实是归属于BOM的，标准语法应该是：window.alert()
注意：因为这些东西都是属于浏览器给的，所以就会导致在不同的浏览器上显示的效果可能是不一样的。
浏览器的可视窗口尺寸
可视窗口：就是我们可以看见的区域
获取可视窗口的尺寸
获取窗口的宽度：window.innerWidth
获取窗口的高度：window.innerHeight
注意：获取的宽度和高度是包含滚动条在内的
console.log('窗口的宽度：',window.innerWidth);浏览器的弹出框
1.提示框：
语法：window.alert('提示文本')
表现形式：一个提示文本+一个确定按钮
返回值：undefined
2.询问框
语法：window.confirm('提示文本')
表现形式：一个提示文本+一个确定按钮+取消按钮
返回值：用户点了确定就返回true，点取消就返回false
3.输入框
语法：window.prompt('提示文本')
表现形式：一个提示文本+一个确定按钮+取消按钮+一个文本输入框
返回值：点了确定返回的就是文本输入框的内容，点了取消返回的就是null
三个框的共同点：都会阻止程序的执行，必须等到用户点了程序才会继续向下执行浏览器的常见事件
事件一般都是有触发条件，事件名称之前写的时候一般都要加on
浏览器的常见事件
1.load
语法：window.onload = function(){}
当触发了load事件之后才会执行function中的代码
load什么时候触发：当页面中所有的外部资源（html、css、js、图片、视频、音频）
全部加载完毕的时候就会自动触发load事件
使用场景：
假如你的js代码写在了head标签中了，你还想操作页面元素（标签）
这个时候因为代码从上到下依次执行，会先执行js
再执行body中的语句，所以会存在找不见这个标签的风险。
这个时候我们就只需要加一句：window.onload
将我们的代码放到load的执行函数中就没有这个问题了
因为onload会等到页面资源加载完毕之后才会执行。
2.resize
语法：window.onresize = function(){}
resize的触发时机：当页面尺寸发生改变的时候就会触发
3.scroll
语法：window.onscroll = function(){}
触发时机：当页面的滚动条为止发生改变的时候就触发浏览器的地址栏
在window之下有一个location对象，这个对象中存储了一些和浏览器地址栏相关的信息
1）window.location.href这是一个可读可写属性
拿到网址：window.location.href
设置网址：window.location.href = '新的网址'
案例：点击一个按钮，切换网址
1.在js中获取按钮
2.给按钮绑定一个点击事件
3.更改网址
<body>
<button id="btn">点我</button>
</body>
<script>
var btn = document.getElementById('btn')
btn.onclick = function () {
window.location.href = 'http://www.baidu.com' // 更改网址
}
</script>
//---------------------------------------------------------------------------
2）reload()
语法：window.location.reload()
作用：重新加载页面（其实就是刷新的意思）
注意：这句话不要放在打开页面就能执行的地方
案例：
写一个点击按钮实现刷新的功能
步骤：
1.在js中先获取按钮
2.给按钮绑定点击事件
3.点击执行执行刷新语句
<body>
<button id="shuaxin">点我</button>
</body>
<script>
var shuaxinbtn = document.getElementById('shuaxin')
shuaxinbtn.onclick = function () {
window.location.reload() //刷新页面
}
</script>
操作浏览器标签页
1)open()
语法：window.open('地址')
会以新窗口的方式打开该地址
<body>
<button id="btn">打开</button>
</body>
<script>
var btn = document.getElementById('btn')
btn.onclick = function () {
// 执行window.open() 点了按钮之后会以新窗口的方式打开百度这个网址
window.open('http://www.baidu.com')
}
</script>
//-----------------------------------------------------------------
2)close()
语法：window.close()
会关闭当前页面
<body>
<button id="btn2">关闭</button>
</body>
<script>
var btn2 = document.getElementById('btn2')
btn2.onclick = function () {
window.close()
}
</script>浏览器卷去的尺寸
如何获取浏览器卷去的高度(.scrollTop)
语法1：document.documentElement.scrollTop(html中有doctype标签时用)
语法2：document.body.scrollTop（html中无doctype标签时用）
兼容语法：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
如何获取浏览器卷去的宽度(.scrollLeft)
语法1：document.documentElement.scrollLeft
语法2：document.body.scrollLeft
兼容语法：
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
//什么时候执行？页面滚动的时候就会自动触发
window.onscroll = function(){
// 只要页面滚动了，就获取一下页面卷去的宽度
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(scrollLeft);
}浏览器的历史记录
操作历史记录：
得有历史记录才可以操作
1）回退：
语法：window.history.back()
作用：回到上一个历史记录页面（等价于🔙按钮）
2）前进：
语法：window.history.forward()
作用：取到下一个历史记录（等价于→按钮）
3)跳转：
语法：window.history.go(参数)
这个参数可以写一个数字
正整数：就是前进几个页面
负整数：回退几个页面
0：跳转到本页面，其实就是刷新设置滚动条的滚动距离
写参数的方案1：传递数字
语法1：window.scrollTo(x，y)
x：横向的卷去的尺寸
y：纵向卷去的尺寸
注意：
1.他是瞬间滚动，没有动画效果
2.必须传递2个数字，1个不行
写参数的方案2：传递一个对象
语法2：window.scrollTo({left:？,top:？,behavior:'smooth'})
left:横向卷去的尺寸
top:纵向卷去的尺寸
想设置谁就设置谁
还可以在对象中写第三条属性，比如写一个behavior将值设置位smooth，这样就可以有平滑滚动的效果
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
