BOM介绍
浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM与DOM区别
DOM是文档对象模型，把文档当做对象来看待，它的顶级对象是document，我们主要学习的是操作页面元素。DOM是W3C标准规范。
BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window，我们主要学习的是浏览器窗口交互的一些对象。BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
window对象
- window 对象是一个全局对象，也可以说是 JavaScript 中的顶级对象
- 像 document、alert()、console.log()这些都是 window 的属性，基本 BOM 的属性和方法都是 window 的
- 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
- window 对象下的属性和方法调用的时候可以省略 window
window对象常见事件
窗口加载事件
- window.onload
window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
onload 页面加载事件有两种注册方式：
//方式1
window.οnlοad=function(){}
//方式2
window. addEventListener(‘load’,function(){})
演示案例：
<body><input type="button" name="" id="" value="按钮"><script>window.addEventListener('load', function() {// 当页面加载完成后执行的代码alert('kiss me');var btn = document.querySelector('input');btn.addEventListener('click', function() {alert('hug me');});});</script></body>需要注意的是，window.onload注册事件的方式只能写一次，如果有多个，会以最后一个window.onload为准。如果使用addEventListener则没有限制。
- document.DOMContentLoaded
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。le9以上才支持
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
load 等页面内容全部加载完毕，包含页面dom元素，图片，f1ash， css等等
DOMContentLoaded是DOM加载完毕，不包含图片falsh css 等就可以执行，加载速度比load更快一些
<body><input type="button" value="按钮"><script>window.addEventListener('load',function(){var btn=document.querySelector('input')btn.addEventListener('click',function(){alert('hug me')})})window.addEventListener('load',function(){alert('kiss me')})document.addEventListener('DOMContentLoaded',function(){alert('lalala')})//1oad 等页面内容全部加载完毕，包含页面dom元素图片f1ash css等//DoMcontentLoaded是DOM加载完毕，不包含图片falshcss等就可以执行加载速度比1oad更快一些</script></body> 调整窗口大小事件
当调整window窗口大小时，就会触发window.onload事件，调用 事件处理函数，该事件有两种注册方式：
//方式1
window.οnresize=function(){}
//方式2
Window.addEventListener(‘resize’,function(){})
利用页面加载事件和调整窗口大小事件，完成响应式布局，示例代码如下：
<style>div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div></div><script>window.addEventListener('load',function(){var div=document.querySelector('div')window.addEventListener('resize',function(){if(window.innerWidth<=800){div.style.display='none'}else{div.style.display='block'}})})</script></body定时器
定时器方法
在JavaScript中，提供了两组方法用于定时器的实现，具体方法如下：
定时器方法：
| 方法 | 说明 |
| setTimeout() | 在指定的毫秒数后调用函数或执行一段代码 |
| setInterval() | 按指定的周期（以毫秒计）来调用函数或执行一段代码 |
| clearTimeout() | 取消由setTimeout()方法设置的定时器 |
| clearInterval() | 取消由setInterval（）设置的定时器 |
在实际开发中，我们可以使用setTimeout（）方法实现函数的一次调用，并且可以通过clearTimeout（）清除定时器
location对象
location对象比较特别，它既是window对象的属性，同时也而是document对象的属性，window.location等同于document.location,它们是引用了同一个对象。Location对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的URL。
location URL的示例：
示例1：
protocol://host[:port]/path/[?query]#fragment
示例2：
http：//www.example.com:80/web/index.html?a=3&b=4#res
location URL的组成
| 各部分 | 说明 |
| protocol | 网络协议，常用的如http、ftp、mailto等 |
| host | 服务器的主机名，如www.example.com |
| port | 端口号，可选，省略时使用协议的默认端口，如http默认端口为80 |
| path | 路径，如“/web/index.html” |
| query | 参数，为键值对的形式，通过“&”符号分割，如“a=3&b=4” |
| fragment | 锚点，如“#res”，表示页面内的锚点 |
案例：获取URL参数
- 创建login.html登录页面，搭建表格结构，示例代码如下：
<body><form action="index.html">用户名：<input type="text" name="uname"><input type="submit" value="登录"></form></body>上述代码中用action属性把表单提交到index.html页面
Index.html代码示例如下：
<body> <div></div><script>console.log(location.search)var params=location.search.substr(1)console.log(params)var arr=params.split('=')console.log(arr)var div=document.querySelector('div')div.innerHTML=arr[1]+'欢迎您'</script></body>location 的常用方法
| 方法 | 说明 |
| assign() | 载入一个新文档 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档，覆盖浏览器当前文档 |
location.assign() 可以立即打开一个新的浏览器位置，并生成一条新的历史记录，接受的参数为URL地址
reload（）方法的唯一参数，是一个布尔类型的值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新按钮
replace（）方法的作用是使浏览器的位置发生改变，并且禁止在浏览器历史记录中生成新的记录，它只接受一个要导航到的URL参数，而且在调用replace（）方法后，用户不能返回到前一个页面
示例代码：
<body><input type="button" value="按钮1" class="one"><input type="button" value="按钮2" class="two"><input type="button" value="按钮3" class="three"><script>const btn1=document.querySelector('.one')const btn2=document.querySelector('.two')const btn3=document.querySelector('.three')btn1.addEventListener('click',()=>{location.assign("https://blog.csdn.net/")})btn2.addEventListener('click',()=>{location.reload()})btn3.addEventListener('click',()=>{location.replace('https://www.baidu.com/')})</script></body>navigator 对象
navigator 是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
• 通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent（浏览器信息）(function () {const userAgent = navigator.userAgent// 验证是否为 Android 或 iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是 Android 或 iPhone，则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})();histroy 对象
history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等
使用场景
history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
history对象的属性和方法
| 分类 | 名称 | 说明 |
| 属性 | length | 返回历史列表中的网址数 |
| 方法 | back（） | 加载history列表中的前一个URL |
| forward（） | 加载history列表中的下一个URL | |
| go（） | 加载history列表中的某一个具体页面 |
<body><button class="back">←后退</button><button class="forward">前进→</button><script>// histroy 对象// 1.前进const forward = document.querySelector('.forward')forward.addEventListener('click', function () {// history.forward()history.go(1)})// 2.后退const back = document.querySelector('.back')back.addEventListener('click', function () {// history.back()history.go(-1)})</script>本地存储（今日重点）
本地存储：将数据存储在本地浏览器中
常见的使用场景：
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage 和 localStorage 约 5M 左右
localStorage（重点）
作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失
特性：以键值对的形式存储，并且存储的是字符串， 省略了 window
<body><script>// 本地存储 - localstorage 存储的是字符串// 1. 存储localStorage.setItem('age', 18)// 2. 获取console.log(typeof localStorage.getItem('age'))// 3. 删除localStorage.removeItem('age')</script></body>sessionStorage（了解）
特性：
• 用法跟 localStorage 基本相同
• 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除
存储：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
localStorage 存储复杂数据类型
问题：本地只能存储字符串,无法存储复杂数据类型.
解决：需要将复杂数据类型转换成 JSON 字符串,在存储到本地
语法：JSON.stringify(复杂数据类型)
JSON 字符串：
• 首先是 1 个字符串
• 属性名使用双引号引起来，不能单引号
• 属性值如果是字符串型也必须双引号
<body><script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为 JSON 字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))</script></body>问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用
解决： 把取出来的字符串转换为对象
语法：JSON.parse(JSON 字符串)<body>
<script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为 JSON 字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))// 2. 把 JSON 字符串转换为对象 JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))</script></body综合案例
数组 map 方法
使用场景：
map 可以遍历数组处理数据，并且返回新的数组
语法：
<body><script>const arr = ['red', 'blue', 'pink']// 1. 数组 map 方法 处理数据并且 返回一个数组const newArr = arr.map(function (ele, index) {// console.log(ele) // 数组元素// console.log(index) // 索引号return ele + '颜色'})console.log(newArr)</script></body>map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
map 重点在于有返回值，forEach 没有返回值（undefined）
数组 join 方法
作用：join() 方法用于把数组中的所有元素转换一个字符串
语法：
<body><script>const arr = ['red', 'blue', 'pink']// 1. 数组 map 方法 处理数据并且 返回一个数组const newArr = arr.map(function (ele, index) {// console.log(ele) // 数组元素// console.log(index) // 索引号return ele + '颜色'})console.log(newArr)// 2. 数组 join 方法 把数组转换为字符串// 小括号为空则逗号分割console.log(newArr.join()) // red 颜色,blue 颜色,pink 颜色// 小括号是空字符串，则元素之间没有分隔符console.log(newArr.join('')) //red 颜色 blue 颜色 pink 颜色console.log(newArr.join('|')) //red 颜色|blue 颜色|pink 颜色</script></body
