（十）BOM

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 属性，表示此元素到定位 祖先元素 的垂直距离
  定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素