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

前言:

真正的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>

四、小结

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

时间: 2024-10-26 15:52:56

JavaScript入门篇之浏览器对象模型的相关文章

JavaScript小白教程7浏览器对象模型 BOM

JavaScript Window - 浏览器对象模型 Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口.页面就是一个窗口 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. Window 尺寸(窗口的大小:长宽) 其他 Window 方法 一些其他方法: window.open() - 打开新窗口 window.close() - 关闭当前窗口 win

JavaScript入门篇

一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 4. 做为一个Web开发师,如果你想提供漂亮的网页.令用户满意的上网体验,JavaScript是必不可少的工具. 二.易学性 1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序. 2.我们可以用简单命令,完成一些基本操作. 三.从哪开始学习呢? 学习JavaScript的

JavaScript入门篇 - 常用互动方法

为什么学习JavaScript 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 二.易学性 1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序. 2.我们可以用简单命令,完成一些基本操作. 三.从哪开始学习呢? 学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作. 如何插入J

JavaScript入门篇 第一天

使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间.<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言. #JS——引

《JavaScript入门篇》摘要

0.课程链接 http://www.imooc.com/learn/36 1.在HTML中加入JS的方法 1 <script type="text/javascript"> 2 document.write("hello"); 3 document.getElementById("p1").style.color="blue" 4 </script> <script type="text

JavaScript入门篇之文档对象模型

前言: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容.结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的). 文档对象模型提供了一种访问和修改HTML文档内容的方法.DOM是万维网联盟(W3C)定义的一种标准.大部分的互联网浏览器以各种形式实现了DOM并且获得了不同程度的成功.和其他标准,特别是那些与web编程

JavaScript 入门篇01- 标签位置

在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面. 一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,在这里讨论2种情况: 1.放在<head>里 将<script>元素放在head中是为了让浏览器在一开始就读取,<script>元素会在整个网页最开始解析时就加载执行,其优先次序仅次于<title>元素. 然后依次向下解析渲染. 应用:比如进行页面显示初始化的js必须放在

JavaScript入门篇 第二天

提问(prompt 消息对话框) prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息.弹出消息对话框(包含一个确定按钮.取消按钮与一个文本输入框). 语法: prompt(str1, str2); 参数说明: str1: 要显示在消息对话框中的文本,不可修改 str2:文本框中的内容,可以修改 返回值: 1. 点击确定按钮,文本框中的内容将作为函数返回值 2. 点击取消按钮,将返回null 看看下面代码: var myname=prompt("请输入你的姓名:"); if

JavaScript入门篇之新生代JSON遇XML

信息化到处被提及的特点,就是拥有大量的数据交互的格式.前阵子学习了XML的结构化数据,在学习javascript的时候又接触到了JSON,都作为数据的存储格式,二者之间有什么区别和联系呢,查了很多的资料,小编在这里就相当于写个总结了. 十年前,XML是主要的数据交换格式.它的出现,尤如一股清新的空气,以及令人惊喜的SGML(标准通用标记语言),是一个巨大的进步.它使人们能够做到以前想都不敢想的事情,本质上讲,XML就是一个文本文件,在解析上,在普通的web应用领域,开发者经常为XML的解析伤脑筋