简介：

BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。

1、BOM结构

window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法

使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同

2、window对象

名称	描述
`open()`	打开一个新浏览器窗口
`alert()`	显示警告框
`close()`	关闭当前浏览器窗口
`scrollTo()`	可把内容滑动到指定坐标
`scrollBy()`	可将内容滑动指定的距离（相对于当前位置）
`innerWidth`	返回窗口的网页显示区域宽度
`innerHeight`	返回窗口的网页显示区域高度

2.1 open(url, name, features, replace)

url: 打开指定页面的url，如果没有则打开空白页
- name: 指定target属性或窗口名称，支持以下值：
  - _blank –- url加载到新窗口（默认）
  - _parent –- url加载到父框架
  - _self –- url替换当前页面
  - _top –- url替换任何可加载的框架集
  - name -- 窗口名称
features: 设置新打开窗口的功能样式（如：width=500）
replace
- true –- url替换浏览历史中的当前条目
- false –- 在浏览历史中创建新条目

// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500')

2.2 scrollTo(xpos, ypos)

xpos：距离网页左上角x坐标
ypos：距离网页左上角y坐标

<style>.box { height: 3000px; }
</style>
<div class="box"><p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {scrollTo(0, 500) // 页面加载后，滚动到距离顶部500px})
</script>

3、location对象

location对象包含当前url信息，经常用于网址判断，url跳转

名称	描述
`href`	返回当前完整网址
`host`	返回主机名和端口号，通常指完整域名
`protocol`	返回网址协议
`port`	返回端口号
`pathname`	返回网址路径部分
`search`	返回网址中的?及?后的字符串（查询部分），通常指查询参数
`hash`	返回网址中的#及#后的字符串，通常指锚点名称
`assign(url)`	在当前页面打开指定新url（增加浏览记录）
`reload()`	重新加载当前页面
`replace(url)`	打开新url替换当前页面（替换当前浏览记录）

3.1 获取网址信息

// 以https://www.csdn.net/nav/python?param1=111&param2=222#first为例，
查看输出结果
console.log(location.href)

// “https://www.csdn.net/nav/python?param1=111&param2=222#first” 
console.log(location.host)        // “www.csdn.net”

console.log(location.protocol)    // “https://”

console.log(location.pathname)  // “/nav/python”

console.log(location.search)     // “?param1=111&param2=222”

console.log(location.hash)       // “#first”

3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url

location.href = 'https://www.csdn.net'

4、history对象

history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转

名称	描述	示例
`back()`	返回历史记录的上一个url	`history.back()`
`forward()`	返回历史记录的下一个url	`history.forward()`
`go(n)`	返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页	`history.go(-1)` `history.go(1)`

5、navigator对象

navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性

名称	描述
`platform`	返回操作系统类型
`userAgent`	返回用户代理头的值

判断是否为谷歌内核：

navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核

6、screen对象

screen对象包含用户屏幕的信息

名称	描述
`availWidth`	返回屏幕的宽度（不包括windows任务栏）
`availHeight`	返回屏幕的高度（不包括windows任务栏）
`width`	返回屏幕的总宽度
`height`	返回屏幕的总高度

BOM 定时器

1、定时器方法

方法名	定义	清除定时器方法
`setTimeout()`	指定的毫秒数后调用函数或计算表达式	`clearTimeout()`
`setInterval()`	按照指定的周期（毫秒）来调用函数或计算表达式	`clearInterval()`

1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)

setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;

定时器到期时，可以通过setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;

定时器清除方法clearTimeout(id)，id为setTimeout()的返回值;

示例：

<p class="info"></p>
<button class="btn">清除定时器</button>
<script>var info = document.querySelector('.info')var btn = document.querySelector('.btn')var t1 = setTimeout(function() {info.innerHTML = '已经5秒了'}, 5000);// 点击按钮可清除定时器var btn = document.querySelector('.btn')btn.addEventListener('click', function() {clearTimeout(t1)info.innerHTML = '定时器已清除'})
</script>

1.2 setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)

语法与setTimeout()相似，区别是setInterval()第二个参数为运行间隔;

由于setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;

示例：

<p class="info"></p>
<script>var info = document.querySelector('.info')var num = 0var t1 = setInterval(function() { // 每隔1秒显示当前时间，5次后停止info.innerHTML = '当前时间：' + String(new Date())if (num >= 4) { clear() }num++}, 1000)// 清除定时器function clear() {clearInterval(t1)info.innerHTML = '定时器已清除'}
</script>

放大镜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.s_box,.b_box{width:400px;height:300px;position: absolute;top:0;}.s_box{left:0;}.s_box img{width: 400px;height: 300px;}.s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}.b_box{left:500px;display: none;overflow: hidden}.b_box img{width: 1200px;height: 900px;position: absolute;left: 0;top: 0;}</style>
</head>
<body>
<div class="s_box"><img src="../../img/派大星.jpeg" alt=""><span></span>
</div>
<div class="b_box"><img src="../../img/派大星.jpeg" alt="">
</div>
</body>
<script>// OOP:编程function Magnifier(){// 1.选元素this.sBox = document.querySelector(".s_box");this.span = document.querySelector(".s_box span");this.bBox = document.querySelector(".b_box");this.bImg = document.querySelector(".b_box img");// 2.绑定事件this.init()}Magnifier.prototype.init = function(){var that = this;// 进入this.sBox.onmouseover = function(){// 3-1.显示，计算span的宽高that.show()}// 离开this.sBox.onmouseout = function(){// 3-2.隐藏that.hide()}// 移动this.sBox.onmousemove = function(eve){var e = eve || window.event;// 5.span跟随鼠标that.move(e)}}Magnifier.prototype.show = function(){// 显示，计算span的宽高this.span.style.display = "block";this.bBox.style.display = "block";this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";}Magnifier.prototype.hide = function(){// 隐藏this.span.style.display = "none";this.bBox.style.display = "none";}Magnifier.prototype.move = function(e){// 计算移动的距离var l = e.clientX - this.span.offsetWidth/2;var t = e.clientY - this.span.offsetHeight/2;console.log(this.sBox.offsetTop);//  边界限定if(l<0) l=0;if(t<0) t=0;if(l>this.sBox.offsetWidth - this.span.offsetWidth){l=this.sBox.offsetWidth - this.span.offsetWidth}if(t>this.sBox.offsetHeight - this.span.offsetHeight){t=this.sBox.offsetHeight - this.span.offsetHeight}//  span跟随鼠标this.span.style.left = l + "px";this.span.style.top = t + "px";//  计算比例// 当前值 / 总值，得到的就是比例var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);//  根据比例计算右边大图应该移动的距离// 比例 * 总值，得到的就是当前应该移动的距离this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";}new Magnifier();
</script>
</html>