博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

DOM编程—window对象

Posted on 2009-05-27 13:35  记录  阅读(1132)  评论(0编辑  收藏  举报

DOM(Document Object Model):文档对象模型定义了一套标准方法来访问和操纵HTML文档。

        按树状形式结构组织HTML文档,树状结构中的每一个对象称为一个节点,每一个对象都有一个或多个属性与方法。

经验:要会设定文档中元素的ID(如<A id="myAnchor" href="#">淘宝</A>),并且会引用这些ID元素

       (如document.getElementById('myAnchor'))就可以访问和控制页面中的所有元素。

浏览器对象是一个分层结构,也称为文档对象模型。 如:window.document.myForm.txt1

 一、window对象常用的属性、方法、事件:

  1、属性:status 状态栏中显示的临时消息/screen 有关客户端的屏幕和显示性能的信息/

               history 访问过的URL的信息/location 当前的URL的信息/document表示浏览器窗口中的HTML文档。

  2、方法:alert(" 提示信息") 显示提示信息和确定按钮的对话框/confirm(" 提示信息") 相对于alert多了一个取消按钮/

               open("打开窗口的url","窗口名","窗口特征")/close()/showModalDialog("打开对话框的url","对话框名","对话框特征")

  3、事件:常用的onload事件,它表示在窗口或框架完成文档加载时触发。用法onload="函数名()"

 示例1:

        function openwindow()

       {

           window.status="系统当前状态:您正在注册......";

           if(window.screen.width==1024 && window.screen.height==768)

             window.open("register.html","注册窗口","toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1");

          //toolbars 工具条,包括”后退“和”前进“

         //scrollbars是否显示滚动条/location是否显示地址栏/resizable是否可以改变窗口的大小

           else

             window.alert("请设置分辨率为1024x768,然后再打开");

        }

     function closewindow()

     {

          if(window.confirm("您确认要退出系统吗?"))

             window.close();

     }

         也可以通过超链接来调用JavaScript语句如:使用<a href="javascript:openwindow()">退出</a>可以用来关闭当前浏览器窗口。

注意:通常可以省略window,但是当使用层、框架和多窗口时,就不能省略。

二、Date对象和setTimeout()方法做时钟显示:

      var 日期对象=new Date(参数);

      如果没有指定参数,则表示当前日期和时间。

  1、     Date对象的方法组:

                               setXxx:设置时间和日期值

                               getXxx:获取时间和日期值

                               如:var now=new Date();

                                     var hour=now.getHours();

  2、setTimeout()方法:(重点)

  示例:function disptime()

         {

              var time=new Date();

              var hour=time.getHours();

              var minute=time.getMinutes();

              var second=time.getSeconds();

              document.myform.myclock.value=hour+":"+minute+":"+second+"";

              var myTime=setTimeout("disptime()",1000);    //1秒等于1000毫秒

          }

          //调用

         //省略代码

          <body onLoad="disptime()">

        //省略代码

        <input name="myclock" type=:"text" value="" size="10">

       //代码省略

三、history和location对象:

   1、 history对象是通过JavaScript运行时引擎自动创建的,并且是由一系列URLs组成的。

         history对象的方法:

         back():上一个URL/forward():下一个URL

         go("url" or number)

         示例:history.go(1)表示前1页     history.go(-1)表示后1页

  2、location对象相当于IE浏览器中的地址栏

       location对象的属性:

                                 host  设置或返回URL的主机名和端口号

                                 hostname  设置或返回URL的主机名部分

                                 href 设置或返回完整的URL字符串

       注:location.href的属性是可以修改的,因此可以使用它来打开新的页面;而documet.URL的属性只能返回不能修改

      location对象的方法:

                                assign("url")   加载URL指定的新的HTML文档

                                reload()重新加载当前页

                                replace("url") 通过加载URL指定的文档来替换当前文档

   示例:

          //代码省略

           <a href ="javascript: history.back()">返回</a>

           <a href ="javascript: history.forward()">前进</a>

           <a href ="javascript: location.reload()">刷新</a>

           <select name="selTopic" id="selTopic" onChange="javascript:location=this.value">

           <option value="news.html">新闻贴图</option>

           <option value="gard.html">网上谈兵</option>

          <option value="IT.html">IT茶馆</option>

          <option value="education.html" selected>教育大家谈</option>

         //代码省略

01:31:48 PM