bom提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
DOM与BOM的区别
DOM
- 文档对象模型
- DOM是把文档当作一个对象来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
BOM
- 浏览器对象模型
- 把浏览器当作一个对象来看待
- BOM的顶级对象是window
- BOM主要学习浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window，前面文章的对话框也都属于window对象方法，如alert()、prompt()等，它们的全称可以写成：window.btn.alert();
window对象的常见事件
窗口加载事件
window.onload = function(){}
或者
window.addEventListener("load",function(){});
传统注册方式
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发改事件（包括图像，js、css等），才去调用这个事件。
<!-- 这个js放在什么位置都可以，因为它是页面全部加载完才去执行这个事件 -->
<script>
window.onload=function(){
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
alert('点击了');
})
}
</script>
<button>点击</button>
传统注册方式只能写一次，如果写多个，会以最后一个window.onload为准
方法监听注册方式（推荐）
<!-- 这个js放在什么位置都可以，因为它是页面全部加载完才去执行这个事件 -->
<script>
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击了');
})
})
</script>
<button>点击</button>
方法监听注册方式可以注册多个监听器（处理函数）
DOMContentLoaded加载方式
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoad事件触发仅当DOM加载完成，不包括样式表、图片、flash等等，就已经触发了。
如果页面的图片很多，从用户访问到onload触发可能需要很长时间，交互效果就不能实现，影响用户体验，所以此时用DOMContentLoaded事件合适
document.addEventListener('DOMContentLoaded',function(){
alert('test');
})
DOMContentLoaded与load执行顺序测试
<script>
//load当网页内容完全加载完成才会执行里面的代码
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等才会执行
// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
</script>
结果演示
调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
触发时就调用处理函数。利用这个事件可以完成响应式布局，window.innerWidth获得当前屏幕的宽度。
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('屏幕变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
定时器
setTimeout()定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
在时间到期后执行调用函数，结束后不再调用了。
setTimeout(function() {
console.log('时间到了');
}, 2000);
//第二种写法
function callback() {
console.log('到了');
}
//给很多定时器加标识符
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
清除定时器
window.clearTimeout(timer1)
它可以取消之前通过调用setTimeout()建立的定时器。
setInterval()定时器
window.setInterval(回调函数, [间隔的毫秒数]);
它和setTimeout唯一不同的是可以重复调用一个函数，每个这个时间，就去调用一次回调函数。
清除定时器
window.clearInterval(timer1)
获取验证码案例
<script>
// 按钮点击之后，会禁用 disabled 为true
// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的，因此需要用到定时器
// 定义一个变量，在定时器里面，不断递减
// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状
var timedata=3;
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
btn.disabled=true;
var h = setInterval(function(){
if (timedata == 0) {
timedata = 3;
// 清除定时器和复原按钮
clearInterval(h);
btn.disabled=false;
btn.innerHTML = '获取验证码';
} else {
btn.innerHTML = '还剩' + timedata + '秒';
timedata--;
}
},1000);
})
</script>
结果演示
倒计时案例
<script>
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime = +new Date('2021-9-16 18:00:00');
// 先调用一次这个函数，防止第一次刷新页面有空白
countDown();
setInterval(countDown,1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
结果演示
回调函数
setTimeout()称为回调函数callback
普通函数时按照代码顺序直接调用，而回调函数，需要等待时间，时间到了才去调用这个函数，即回头调用的函数，上一件事干完，再回头再调用这个函数。
location对象
window对象提供了一个location属性用户获取或设置窗体的URL，并且可以用来解析URL。这个属性返回的是一个对象。
location对象的属性
重点记住：href和search
案例
5秒跳转案例
<script>
var d=document.querySelector('div');
var t=5;
//消除空白
fn();
setInterval(fn,1000)
function fn() { if (t == 0) {
window.location.href = 'https://demo.wangxuelong.vip/wxl/wxl.html';
} else {
d.innerHTML = '您将在' + t + '秒后看到作者';
t--;
}
}
</script>
结果演示
数据在不同页面的传递案例
login代码
<!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>登陆</title>
</head>
<body>
<form action="index.html">
用户名： <input type="text" name='uname'>
<input type="submit" value="提交">
</form>
</body>
</html>
index代码
<!-- <!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>首页</title>
</head>
<body>
<div></div> -->
<script>
console.log(location.href);
//先去掉？ substr('起始位置',截取几个字符)
var data=location.href.substr(1);//uname=名字
//利用=把字符串分割为数组
var arr=data.split('=');//['uname','名字']
var d=document.querySelector('div');
d.innerHTML=arr[1]+' 您好';
</script>
<!-- </body>
</html> -->
结果演示
location对象的方法
location.assign('https://www.wangxuelong.vip');
assign和href会记录历史，即可以后退；true为强制刷新就是直接从服务器读取数据，而不是从缓存里读
navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，最常用的是userAgent，该属性可以返回由客户端发送服务器的user-agent头部的值。前端代码就可以判断用户用哪个终端打开的页面，从而实现跳转。
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "../H5/index.html"; //手机
}
// else{
// window.location.href = ""; //电脑
// }
</script>
history对象（OA办公系统会用）
这个对象可以与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL。
