BOM(Browser object Model)：浏览器对象模型，也就是通过代码来操作浏览器的一些能力。
可以操作哪些内容？
-
获取一些浏览器的相关信息（如：窗口大小等）
-
操作浏览器进行页面的跳转
-
获取当前浏览器地址栏的信息
-
操作浏览器的滚动条
-
浏览器的信息（如：浏览器的版本信息）
-
让浏览器出现一个弹出框（alert/prompt/confirm）
-
...
BOM的核心是window对象。window是浏览器内置的一个对象，里面包含着操作浏览器的方法。
注意：事件和对象不同，在使用window上的方法时不可以省略window，但如果是在使用window下的对象时，可以省略window。
目录
★sessionStorage和localStorage的区别
1、获取浏览器窗口的尺寸
1）、innerWidth和innerHeight
这两个方法分别是用来获取浏览器可视窗口的高度和宽度（包含滚动条）。
var windowHeight=window.innerHeight //直接innerHeight也可以
var windowWidth=window.innerWidth
console.log(windowHeight)
console.log(windowWidth)2）、outerWidth和outerHeight
这两个方法用来获取整个浏览器的完整大小,包括顶部地址栏和标签页部分。
var windowHeight=window.outerHeight
var windowWidth=window.outerWidth
console.log(windowHeight)
console.log(windowWidth)3）、screen.width和screen.height
获取整个电脑屏幕的大小，每个人的电脑分辨率是不一样的。
var scwidth=screen.width
var scheight=screen.height
console.log(scwidth)
console.log(scheight)2、浏览器的弹出层
window.alert("提示信息")--提示框
window.confirm("提示信息")--询问框 点击确定是true，取消是false
window.prompt("提示信息")--输入框 输入内容点击确定是输入的内容，点击取消是null
注意：弹出层会阻塞后续代码的执行，得用户点击按钮之后，才会执行后续代码。
3、浏览器的地址栏
在window中有一个对象叫做location，是专门用于存储浏览器的地址栏内的信息的。
1）、location.href
这个属性存储的是浏览器地址栏内url地址的信息。
console.log(window.location.href) // 直接location.href也可以也可以给这个属性进行赋值操作。
window.location.href="./index.html" //其他网站也可以2）、location.replace
用于替换当前地址栏内的地址。
btn.onclick=function(){
location.replace("新地址")
}3）、location.reload()
该属性是用于刷新页面的。
xxx.onclick=function(){
location.reload()
}4、浏览器事件
1）、onload事件
该事件是在页面所有资源加载完毕之后执行的。
window.onload=function(){
console.log("页面资源已经加载完成")
}2）、onresize事件
该事件是在浏览器的可视窗口尺寸被改变时会触发的事件。
window.onresize = function () {
console.log("尺寸被改变了");
};3）、onscroll事件
该事件在浏览器滚动条滚动时触发。
window.onscroll=function(){
console.log("滚动条在滚动")
}4）、获取浏览器滚动距离
有<!DOTYPE html>时使用：document.documentElement.scrollTop
当没有<!DOCTYPE html>时使用：document.body.scrollTop
//通过document.documentElement.scrollTop获取距离
// window.onscroll = function () {
// // scrollTop指的是窗口顶端距离滚动条顶端的距离
// console.log(document.documentElement.scrollTop);
// };
// 当没有<!DOCTYPE html>时，会发现该方法失效，不能获取滚动的距离。
// 此时应该将documentElement换成body
window.onscroll = function () {
// scrollTop指的是窗口顶端距离滚动条顶端的距离
console.log(document.body.scrollTop);
};注意：当存在<!DOCTYPE html>时，使用document.body.scrollTop也不会获取到值。
说明该方法存在浏览器版本的兼容性问题。
解决办法：使用兼容性写法。
window.onscroll=function(){
console.log(document.documentElement.scrollTop || document.body.scrollTop)
//使用逻辑运算符 || ，当有一个获取到的值为0时，就使用另一个方法。
}上面的两种写法都是获取到的纵向滚动条的距离，还可以获取横向滚动条的距离。
通过：document.documentElement/body.scrollLeft
window.onscroll=function(){
console.log(document.documentElement.scrollLeft || document.body.scrollLeft)
}5）、回到顶部事件
在浏览器往下或者往右滚动到一定距离时，有时候希望能够一下子就回到最开始的位置，或者是跳转到页面的指定位置，可以通过：scrollTo(x,y)事件实现。
scrollTo的两个参数：
x：表示窗口横坐标，0表示浏览器的原始位置横坐标；
y：表示窗口纵坐标，0表示浏览器的原始位置纵坐标
btn.onclick=function(){
window.scrollTo(0,0) //回到浏览器的原始位置
}除了直接传坐标外，还可以传对象形式的参数，对象中保存的是指定位置的坐标，以及跳转时的效果。
btn.onclick=function(){
window.scrollTo({
left:0,
top:0,
beavior:"smooth" //平滑的移动
})
}其中，behavior的值有两个，smooth和auto，auto是默认值，smooth表示平滑的移动到指定位置。
6）、open和close事件
window.open(url,target,"配置参数")：默认新窗口打开指定网址。
window.close()：关闭当前网页。
// 打开新网页
btn1.onclick=function(){
window.open("http://www.baidu.com","_self")
}
// 关闭当前网页
btn2.onclick=function(){
window.close() //要关闭哪个网页，就xxx.close()
}注意：
- open的第三个配置参数可以是：width，height，left，top。但如果该项没有传入时，窗口大小和浏览器一样，并和浏览器融于一体；
- 写入第三个实参后，会脱离浏览器并成为一个独立的小窗口，还可以保存起来；
- 宽高不能写的太小，否则设置的宽高会失效；
// 打开新网页
btn1.onclick=function(){
window.open("http://www.baidu.com","_self","width=300,height=200,left=50,top=30")
}7）、浏览器的历史记录
window中有一个对象叫做history，是专门用来存储历史记录信息的。
history.back()
该方法用于回退历史记录，即回退到前一个页面，相当于浏览器上的⬅按钮。
window.history.back()但使用这个方法的前提是要有上一条记录，不然就会一直在这个界面，也不会回退。
浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。
history.forword()
该方法是去到下一个历史记录里面，也就是去下一个页面，相当于浏览器上的➡按钮。
window.history.forword()前提是之前有过回退操作，不然的话现在就是在最后一个，没有下一个。
当浏览器历史栈处于最顶端时 ( 当前页面处于最后一页时 ) 调用此方法没有效果也不报错。
history.go()
该方法根据传的参数，来决定是前进还是后退。
-
当传入的参数是正数时：前进，并且正数是多少，就前进多少页；
-
当传入的参数是负数时：后退，并且负数的绝对值是多少，就后退多少页；
-
当传入0时：相当于刷新页面；
-
当传入参数超过历史记录长度时，不会报错但也没有效果
8）、浏览器的本地存储
浏览器本地存储又称:WebStorage，存储内容大小一般为 5MB 左右(不同浏览器可能不一样)。
浏览器的存储分为两种：window.localStorage和window.sessionStorage。
localStorage
// 增
localStorage.setItem("name","谭小霖")
// 取
localStorage.getItem("name") //谭小霖
// 删除
localStorage.removeItem("name")
// 清空
localStorage.clear()sessionStorage
// 增
sessionStorage.setItem("name","谭小霖")
// 取
sessionStorage.getItem("name") //谭小霖
// 删除
sessionStorage.removeItem("name")
// 清空
sessionStorage.clear()注意1：当要取的值不存在时，返回的结果是null。
注意2：如果要存储的键和在浏览器中已经有的键相同，就是修改。
注意3：存储数据时，只能保存的是字符换类型，如果要存储的类型不是字符串类型的话，那么浏览器会自动地进行转换。
如：存储数字100，当获取时会发现值类型为String。
特殊：存一个对象类型，当获取时会变成[object Object]样子的字符串，不再是原本存储时的样子了。
所以在存储时，需要使用JSON.stringify(对象类型的数据)，将对象类型的数据转成JSON格式的字符串；获取时，需要使用JSON.parse(json格式字符串)将json格式字符串解析为对象类型的数据。
★sessionStorage和localStorage的区别
-
sessionStorage会在窗口关闭后消失，是临时存储。；
-
localStorage是保存在磁盘的，只有手动删除才会消失，只要不手动删除就是永久存储。；
使用两个方法如果获取存储的key不存在，就都会返回null。
9）、修改窗口的尺寸和位置
window.resizeTo：修改窗口尺寸。
window.moveTo：修改窗口显示位置。
注意：这两个方法，只能用于window.open()方法，并传入了第三个参数才能生效。
var newW=open("about:blank","_self","width=300,height=100")
btn1.onclick=function(){
newW.resizeTo(新的宽，新的高)
}
btn2.onclick=function(){
newW.moveTo(新的left，新的write)
}10）、获取浏览器信息
window中的navigator对象，保存了当前浏览器的基本信息，可以使用js判断我们是什么浏览器以及版本型号从而进行兼容性的操作等，类似于css hack。
常用的一般就一个：navigator.userAgent，能够得到一个字符串，包含着是什么浏览器以及版本号等信息。
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
