0.前言
最近学习了JavaScript中的BOM和DOM，感觉就像两大护法，为JavaScript保驾护航，今天就来分享一下这二者之一———BOM。
1.BOM简介
BOM.png
BOM：浏览器对象模型(Browser Object Model),是操作浏览器和屏幕的对象集合。通过window全局对象来使用它们。
此时可以发现，我们过去定义的变量其实就是给window这个全局对象添加的属性；过去声明的函数其实就是给window这个全局对象添加的方法。
通过上面的结构图可以发现window下面有很多属性，对象。尤其是在第二行：
- window.document：表示的是当前的文档（页面），他的属性和方法属于DOM范围，我们下节分享。
- window.frames：表示当前页面所用的所有框架的集合
- window.navigator：它是用来描述浏览器及其功能的对象。
- window.screen：它是用来描述浏览器以外的环境，例如屏幕的宽高，分辨率之类的。
- window.location：是对浏览器页面进行的操作。如刷新、加载之类的。
-
window.history：是对浏览器访问的历史记录，足迹之类进行的操作。
上面的这是六种方法中，今天着重说两个：loaction和history。
2.正文
这样干说没意思，我们以案例说话。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM简介</title>
</head>
<body>
<button onclick="wh()">跳转到红色界面</button>
<button onclick="refresh()">刷新界面</button>
<button onclick="ass()">加载红色界面</button>
<button onclick="goBack()">上一页</button>
<button onclick="goForward()">下一页</button>
<button onclick="goPage()">直接跳到历史记录中的黄色界面</button>
<script type="text/javascript">
</script>
</body>
</html>
首先搭好界面，第一部分：
window.location
在代码中的javascript中添加下面下面代码：
console.log(window.location.href);
function wh() {
alert("瞅你咋地");
window.location.href = "";
}
function refresh() {
window.location.reload();
}
function ass() {
// window.location.assign("red.html");
window.location.replace("red.html");
}
这段代码用了几个location方法：
（1）href：表示的是当前页面所在的本地地址在浏览器上显示出来了。
（2）reload()：表示的是刷新界面；
（3）reload(true)：也表示的是刷新界面，但是刷新的界面，不会被缓存。
（4）assign()：加载接的界面，可以返回上一页。
（5）replace()：也是加载新的界面，但是不会在历史记录中留下痕迹,就是说返回不了上一页。
注意：更改location中的href和调用assgin()会清空历史记录。
第二部分：window.history
function goBack(){
window.history.back();
}
function goForward(){
window.history.forward();
}
function goPage() {
window.history.go(2);
}
（1）length：表示浏览记录的个数
（2）back()：上一页
（3）forward()：下一页
（4）go(num)：直接跳到指定的历史记录，如果num小于0会跳到当前界面之前的num的绝对值个记录。如果num大于0，会跳到当前界面之后的num值记录。
注意:如果想用go(num)进行页面的跳转，必须在浏览器中有历史记录，否则是跳转不到指定的界面的。
网友评论