BOM 浏览器对象模型

一、BOM基本概念

1. BOM简介

BOM（Browser Object Model，浏览器对象模型）是 JavaScript 与浏览器窗口交互的接口
一些与浏览器改变尺寸、滚动条滚动相关的特效，都要借助BOM技术

二、BOM常用对象

1. window对象

window 对象是当前 JS 脚本运行所处的窗口，而这个窗口中包含 DOM 结构，window.document 属性就是 document 对象
在有标签页功能的浏览器中，每个标签都拥有自己的 window 对象；也就是说，同一个窗口的标签页之间不会共享一个 window 对象
全局变量是window的属性：
- 全局变量会变成 window 对象的属性
- 这就意味着多个 js 文件之间是共享全局作用域的，即 js 文件没有作用域隔离功能
内置函数普遍是window的方法：
- 如 setInterval()、alert() 等内置函数，普遍是 window 的方法
窗口尺寸相关属性

在这里插入图片描述

获得不包含滚动条的窗口宽度，要用document.documentElement.clientWidth
resize事件：监听窗口改变
在窗口大小改变之后，就会触发 resize 事件，可以使用 window.onresize 或者 window.addEventListener(‘resize’) 来绑定事件处理函数
var scrollTop = window.scrollY || document.documentElement.scrollTop;
已卷动高度：
window.scrollY 属性表示在垂直方向已滚动的像素值
已动高度：
document.documentElement.scrollTop 属性也表示窗口卷动高度
（document.documentElement.scrollTop 不是只读的，而 window.scrollY 是只读的）
scroll事件：
在窗口被卷动之后就会触发 scroll 事件，可以使用 window.onscroll 或者 window.addEventListener(‘scroll’) 来绑定事件处理函数

2. Navigator对象

window.navigator 属性可以检索 navigator 对象，它内部含有用户此次活动的浏览器的相关属性和标识

3. History对象

window.history 对象提供了操作浏览器会话历史的接口
常用操作就是模拟浏览器回退按钮

4. Location对象

window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转
重新加载当前页面：
可以调用 location 的 reload 方法以重新加载当前页面，参数 true 表示强制从服务器重新加载
GET请求查询参数：
window.location.search 属性即为当前浏览器的 GET 请求查询参数

三、BOM特效开发

1. 返回顶部按钮制作

返回顶部的原理：改变 document.documentElement.scrollTop 属性，通过定时器逐步改变此值，则将用动画形式返回顶部

<script>
	var backtotopBtn = document.getElementById('backtotopBtn');
	var timer;
	backtotopBtn.onclick = function () {
		//设表先关
		clearInterval(timer);
		//设置定时器
		timer = setInterval(function() {
			//不断让scrollTop减少
			document.documentElement.scrollTop -= 200;
			//停止定时器
			if (document.documentElement.scrollTop <= 0) {
				clearInterval(timer);
			}
		}, 20);
	};
</script>

2. 楼层导航效果

DOM元素都有 offsetTop 属性，表示此元素到定位祖先元素的垂直距离
定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素