BOM(Browser Object Model,浏览器对象模型) 是JS与浏览器窗口交互的接口
一些与浏览器改变尺寸、滚动条相关的特效，都要借助BOM技术
window对象
window对象是当前JS脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象
在有标签页功能的浏览器中，每个标签都拥有自己的window对象；也就是说，同一个窗口的标签页之间不会共享一个window对象
全局变量是window的属性
全局变量会成为window对象的属性
var a = 10;
console.log(window.a == a );//true
这就意味着，多个js文件之间是共享全局作用域的，即js文件没有作用域隔离功能
内置函数普遍是window的方法
如setInterval()、alert()等内置函数，普遍是window的方法
窗口尺寸相关属性
| 属性 | 意义 |
|---|---|
| innerHeight | 浏览器窗口的内容区域的高度，包括水平滚动条（如果有的话） |
| innerWidth | 浏览器窗口的内容区域的宽度，包括水平滚动条（如果有的话） |
| outerHeight | 浏览器窗口的外部高度 |
| outWidth | 浏览器窗口的外部宽度 |
要获得不包括滚动条的窗口宽度，要用
document.documentElement.clientWidth
<style>
/* 使窗口出现滚动条 */
body{
height:5000px;
}
</style>
<script>
console.log('窗口内宽（包括滚动条）',window.innerWidth);
console.log('窗口外宽',window.outerWidth);
console.log('窗口内宽（不包括滚动条',document.documentElement.clientWidth);
</script>
resize事件
在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener('resize')来绑定事件处理函数
<script>
// 监听窗口改变尺寸事件
window.onresize = function(){
//根元素 将窗口取出
var root = document.documentElement;
console.log('窗口改变尺寸了',root.clientWidth,root.clientHeight);
}
</script>
已卷动高度
window.scrollY属性表示垂直方向已滚动的像素值
document.documentElement.scrollTop属性也表示窗口已卷动高度
//进行短路运算，就算 或运算 前面的没有获取到后面的在进行获取
var scrollTop = window.scrollY || document.documentElement.scrollTop
document.documentElement.scrollTop不是只读的，可以改变值；而window.scrollY是只读的
<style>
body {
height:5000px;
}
</style>
<script>
//可以在控制台改变document.documentElement.scrollTop值
console.log(document.documentElement.scrollTop);
console.log(window.scrollY);
</script>
scroll事件
在窗口被卷动之后，会触发scroll事件，可以使用window.onscroll 或者 window.addEventListener('scroll')来绑定事件处理函数
<style>
body {
height:5000px;
}
</style>
<script>
window.onscroll = function (){
console.log('窗口卷动了',window.scrollY);
};
</script>
