BOM的全称browser object mode
css不可调整的一般都是浏览器的部分，比如：浏览器的滚动条、地址栏、关闭按钮、刷新按钮。
BOM可以操作浏览器：
1.弹出框
//提示框
// window.alert()
//输入框
// window.prompt()
//询问框：返回值确定true，取消false
// window.confirm()
<script>
/*
操作浏览器的统一语法都是window.XXX
但是我们window其实是可以忽略不写的。
只要能在浏览器中弹出一个框，统一都叫做弹出框
1.提示框：alert('提示文本')的标准语法是：window.alert()
弹出一个提示框
表现形式：一个提示文本+确定按钮
返回值：undefined
2.输入框：window.prompt('提示文本')
表现形式：一个提示文本+一个输入框+一个确定按钮+取消按钮
返回值：当点击确定的时候返回值就是用户的输入的内容，当点击取消按钮的时候返回值是null
3.询问框：window.confirm('提示文本')
表现形式：一个提示文本+一个确定按钮+一个取消按钮
返回值：当点击确定的时候返回true，当点击取消的时候返回false。
*/
// var res = window.alert('哈哈哈')
// console.log(res);
</script>
2.得到浏览器可视窗口的尺寸
/* 浏览器的可视窗口：注意：获取的宽度和高度是包含滚动条在内的。 */
//获取浏览器宽度
// window.innerWidth()
// console.log(window.innerWidth);
//获取浏览器高度
// window.innerHeight()
3.事件：
load（都加载完再执行），
resize（页面尺寸变化会触发），
scroll（页面滚动条发生变化触发）
<script>
/*
事件：只要是事件都有自己特定的触发条件
1.load事件：当页面中所有的外部资源（html文件、css文件、图片、视频、音频）全部加载完毕才会执行load事件，什么时候资源加载完毕什么时候自动触发load事件。
语法：window.onload = function(){
代码
}
2.resize事件：当页面的尺寸发生改变的时候就触发
语法：window.onresize = function(){
}
只要页面尺寸发生改变，就会自动执行function中的代码
3.scroll事件：当页面滚动条位置发生改变的时候就触发
语法：window.onscroll = function(){
}
只要滚动条动了，就会执行function中的代码
注意：写事件的时候，事件名称前面要加on
*/
// 等所有的外部资源加载完毕才会执行123
// window.onload = function () {
// console.log('123');
// }
// 2
// window.onresize = function(){
// console.log('改变了');
// }
// 3
window.onscroll = function(){
console.log('滚动了');
}
</script>4.浏览器地址栏：location
页面跳转：href 刷新：reload
<body>
<button id="btn">点我</button>
<button id="btn2">新刷</button>
<script>
/*
1.href
在window内有一个location属性，他是一个对象数据类型，里面存储了一些和地址栏相关的信息。
window.location.href:单独拿到网址。
window.location.href = '网址'==重新给href进行复制操作，可以实现达到网页跳转的效果，在本窗口跳转。
按钮：实现点击按钮跳转到百度
*/
// console.log(window.location);
// console.log(window.location.href);
// window.location.href = 'http://www.baidu.com'
var btn = document.getElementById('btn')
btn.onclick = function(){
window.location.href = 'http://www.baidu.com'
}
// 2.reload()===重新加载，其实就是刷新的意思
// 语法:window.location.reload()
// 案例：模仿刷新按钮，当点击按钮执行实现刷新的效果
var btn2 = document.getElementById('btn2')
btn2.onclick = function(){
window.location.reload()
}
</script>
</body>5.浏览器的标签页打开和关闭：open（）；close（）
<body>
<button id="btn1">打开</button>
<button id="btn2">关闭</button>
<script>
/*
1.open()打开一个新的标签页,打开新的标签页的时候可以给一个网址，从而实现网页跳转效果。
语法：window.open('地址')
案例：当点击一个按钮的时候打开一个新的标签页，
2.close()：关闭标签页面
语法：window.close()
案例：点击一个按钮，关闭当前页面
*/
var btn1 = document.getElementById('btn1')
btn1.onclick = function(){
window.open('http://www.baidu.com')
}
var btn2 = document.getElementById('btn2')
btn2.onclick = function(){
window.close()
}
</script>6.浏览器页面卷去的尺寸（推荐兼容写法）:
/* 浏览器卷去的尺寸 */
// 必须有 '<!DOCTYPE html>'
// console.log(document.documentElement.scrollTop);
// console.log(document.documentElement.scrollTop);
// 没有 '<!DOCTYPE html>'
// console.log(document.body.scrollTop);
// console.log(document.body.scrollTop);
得到兼容写法：
<script>
// 两者都满足 保证永远有结果
// 纵向卷去尺寸
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
// 横向卷去尺寸
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(scrollLeft)
</script>7.历史记录 history（），实现，页面跳转（上一页，下一页），刷新：
<body>
页面1
<a href="2.html">去到页面2</a>
<button id="forward">前进</button>
<script>
/*
研究历史记录其实就是模仿浏览器上的前进和回退按钮
要求的前提是：页面必须有历史记录才行
模仿前进和回退
当点击前进按钮的时候需要去到2页面
前进：window.history.forward()
回退：window.history.back()
去到指定的历史记录的页面：window.history.go(数字)
写数字0：去到本页面，其实刷新的意思
写正整数：比如写的是1，意思就是前进1页，写的是2，意思就是前进2页
写负整数：比如写的是-1，意思就是回退1页，写的是-1，意思就是回退2页
*/
var forward = document.getElementById('forward')
forward.onclick = function(){
// 去到下一个页面
// window.history.forward()
window.history.go(1)
// 去到前2个页面
window.history.go(-2)
// 刷新页面
window.history.go()
}
</script>
</body>8.浏览器回到顶部（或者别的位置）：
window.scrollTo({left:0,top:0,behavior:"smooth"})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
position: relative;
height: 3000px;
width: 3000px;
}
button{
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
line-height: 100px;
background-color: aquamarine;
font-size: 24px;
}
</style>
</head>
<body>
<button id="top">回到顶部</button>
<script>
/*
让浏览器滚动到某一个位置。
可以模拟一键回到顶部的效果
语法：
window.scrollTo(参数)
参数写法一：
window.scrollTo(x,y)
你写的第一个数字就代表横向的位置
你写的第二个数字就代表纵向的位置
注意：2个数字，横向位置和纵向位置都必须写，并且没有平滑的滑动效果
参数写法二：
window.scrollTo({left:XXX,top:XXX,behavior:'smooth'})
动横向就写left
动纵向就写top
2个都想操作left和top都写
并且可以添加平滑滑动的效果’
behavior:'smooth':平滑效果
*/
// var btn = document.getElementById('btn')
// btn.onclick = function(){
// window.scrollTo(0,0)
// }
var top = document.getElementById('top')
top.onclick = function(){
window.scrollTo({left:0,top:0,behavior:"smooth"})
}
</script>
</body>
</html>点击前：
点击后：
