JavaScript入门篇之浏览器对象模型

来源：互联网发布：瓦森纳协议知乎编辑：程序博客网时间：2024/06/02 01:33

前言：

真正的JavaScript是由三部分组成，ECMAScript、DOM、BOM，如下图所示。本文将主要介绍其中的浏览器对象模型。 BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

一、window对象

BOM可以用来访问和操作浏览器窗口的浏览器，开发人员可以使用它控制浏览器显示页面以外的部分。它提供了很多的对象，来帮助我们访问浏览器。其中核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，都会有一个默认的window对象。

window对象的属性：

window对象的方法：

在方法中有我们经常使用的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属性：

location方法：

应用举例：

<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（）方法移动到参数指定的索引值。

应用实例：

    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>

四、小结

关于浏览器对象模型中几个重要的对象，需要进一步实践去掌握一些常用的属性和方法。

3 0