🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 前言:   真正的JavaScript是由三部分组成,ECMAScript、DOM、BOM,如下图所示。本文将主要介绍其中的浏览器对象模型。 BOM(Browser Object Mode) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。 ![](https://box.kancloud.cn/2016-08-19_57b6bd272ec51.jpg) ## 一、window对象   BOM可以用来访问和操作浏览器窗口的浏览器,开发人员可以使用它控制浏览器显示页面以外的部分。它提供了很多的对象,来帮助我们访问浏览器。其中核心对象是window,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每个打开的窗口,都会有一个默认的window对象。 ![](https://box.kancloud.cn/2016-08-19_57b6bd2748e8d.jpg) window对象的属性: ![](https://box.kancloud.cn/2016-08-19_57b6bd2762d73.jpg) window对象的方法: ![](https://box.kancloud.cn/2016-08-19_57b6bd277d338.jpg)   在方法中有我们经常使用的alert(),confirm(),prompt()方法可以调用系统对话框向用户显示信息。因为window对象是一个全局对象,所以不需要在它的属性和方法的面前加上window。相反,可以直接调用它们,就向我们已经在那些直接调用alert()方法的实例中见到的那样。 应用举例: ~~~ //确定和取消 if (confirm('请确定或者取消')) { alert("确定要确定么?") } else { alert("确定要取消么?") } ~~~   window对象的直接后代不需要window前缀,不过,当处理window对象的直接后代以外的对象时,则需要在它们前面加上window对象的名字。例如,document对象是window对象的直接后代,所以不需要window前缀,但是document对象的后代却需要document前缀。 举例如下: ~~~ alert('something'); //note no window document.forms[0] //note the document ~~~ ## 二、location对象   location对象使我们能够访问当前载入的URI,包括任何有关查询字符串、使用的协议以及其他相关组件的信息。 location属性: ![](https://box.kancloud.cn/2016-08-19_57b6bd27f0de0.jpg) ![](https://box.kancloud.cn/2016-08-19_57b6bd2813bc1.jpg) location方法: ![](https://box.kancloud.cn/2016-08-19_57b6bd282afd4.jpg) 应用举例: ~~~ <span style="font-family:KaiTi_GB2312;font-size:18px;"><body>   <script lang="javasctript" type="text/javascript">       var body = document.getElementsByTagName("body")[0];       for (var prop in navigator) {           var elem = document.createElement("p");           var text = document.createTextNode(prop + ":" + navigator[prop]);           elem.appendChild(text);           body.appendChild(elem);       }       if (location.search) {           var querystring = localtion.search;           var splits = querystring.splits('&');           for (var i = 0; i < splits.length; i++) {               var splitpair = splits[i].split('=');               var elem = document.createElement("p");               var text = document.createTextNode(splitpair[0] + ":" + splitpair[1]);               elem.appendChild(text);               body.appendChild(elem);           }       }   </script> </body></span> ~~~ ## 三、history对象   history对象提供了通过访问者浏览历史向前和向后移动的方法。具体的说,可以使用back()、forward()、go()。这可能不言而喻,但还要说明一下:back()和forward()分别向后和向前移动一个页面,go()方法移动到参数指定的索引值。 ![](https://box.kancloud.cn/2016-08-19_57b6bd286b504.jpg) 应用实例: ~~~ function back() { history.back(); } function forward() { history.forward(); } <p><a href="#" onclick="return back();">Click to go back</a></p> <p><a href="#" onclick="return forward();">Click to go forward</a></p> ~~~ ## 四、小结       关于浏览器对象模型中几个重要的对象,需要进一步实践去掌握一些常用的属性和方法。