Netscape 6 DHTML编程[1]

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 net_lover 的 blog

进入【孟宪会之精彩世界】    netscape 6已经正式版发布,由于新版本的浏览器采用了全新的技术,是以mozilla和gecko为基础的。gecko是下一代浏览器引擎,它支持html、css、w3c dom、xml、rdf以及javascript等开放的internet标准。netscape 6和以前的版本不兼容,因此,以前在netscape navigator里编写的程序在新版本里不能正常运行。本文将向大家探讨在netscape 6浏览器里进行动态html编程的基本原理。以前当我们涉及到浏览器无关的dhtml动画时,我们的代码将变得很复杂。不同的浏览器对其属性采用不同的句法和不同语义。一个浏览器使用top,而另一个浏览器也许使用pixeltop.一个浏览器使用属性值来确定窗口的位置问题,而另一个浏览器则使用参考整个文档的方法来实现。netscape 6是dom(文档对象模型)兼容的浏览器,而dom(文档对象模型)是编写浏览器无关脚本的关键。netscape 6对w3c规范的支持,确实使我们在进行编写脚本代码时轻松了许多。但是internet explorer 5.5的dom和netscape 6的dom仍然有一些差异。
    本文将向你展示一些在网页中编写动态html的基本原理。innerhtml属性原本不是dom标准的一部分,但是ie和netscape 6都支持它.我们将向你展示怎样利用这一属性来建立引人入胜的页面效果.我们将说明动画的原理:在页面里怎样移动元素。由于动画与坐标位置有关,我们将涉及到怎样来设定、取得和初始化它们的坐标位置。还将探讨元素可视性以及ie 5和netscape 6之间的差异。我们将也讨论对处理netscape将要废弃的blink标记可供选择的方案。

    在本文里,你将学会:
 怎样提取一个标记的所有属性
 怎样设定任意html标记的内容
 怎样水平、垂直移动元素
 怎样设定、取得、初始化、操纵坐标值
 怎样设定、取得、初始化、操纵元素的可视性
 怎样模拟闪烁效果。
 
1.怎样提取一个标记的所有属性?
 
    当我们要制作具有动画效果的页面时,我们要知道怎样去参考要移动的元素。最好的方法是知道其id值。我们可以利用元素的id值来参考一个元素的所有属性和方法。例如:要找出id="bar"的元素的标记名,我们可以这样:bar.nodename。例如:假如我们在页面的某一处设置了<p id="examid">……</p>,下面的的代码将给出id为examid的标记的名字。
   
    <a href="javascript:alert('id 为 examid 的标记名是: '+examid.nodename)">点击这里</a>
    结果如图1。
    

    有时,我们需要搜索所有在页面中的某一个元素,由于internet explorer 5 和netscape 6都支持 getelementsbytagname()方法,它可以生成一个元素数组。此方法适用于任意元素,因此可以提取整个文档里的所有标记,或者在某一个指定的标记的范围里,如div 或p等里的某一元素。下面的函数提取本文档里所有的font和id=foo的div标记里的font标记个数。

    <script language="javascript">
    <!--
    function handlealltags() {
    var arrayofdocfonts, arrayofdivfonts; 
    if (document.all || document.getelementbyid) {   
    arrayofdivfonts = foo.getelementsbytagname("font");   
    arrayofdocfonts = document.getelementsbytagname("font"); 
    } 
    else
    {
    document.write("不可识别的浏览器型号");  } 
    alert("本文档和div里font标记个数分别为: " + arrayofdocfonts.length + " 和 "
    + arrayofdivfonts.length + "个。");}
    // -->
    </script>
    结果如图2。
    
    
    javascript使用了许多集合的概念。集合就是元素的有序列表。我们可以通过数组或者item()方法对某一特定的元素进行访问。下面的代码计算出第3个元素[index=2]的font color值。

    function printcolors() {
    var arrayofdocfonts, arrayofdivfonts;
    if (document.all || document.getelementbyid) {
    arrayofdivfonts = foo.getelementsbytagname("font");
    arrayofdocfonts = document.getelementsbytagname("font");
    }
    else {
    document.write("不可识别的浏览器");
    }
    alert('arrayofdocfonts[2].color = ' + arrayofdocfonts[2].color + ';
    arrayofdocfonts.item(2).color = ' + arrayofdocfonts.item(2).color);
    }
   
    结果如图3。
    
    
    注意:本页所有代码必须在internet explorer 或 netscape 6里才能正确执行。

2.设定html内容

  internet explorer的innerhtml属性并不是 w3c dom规范的一部分,然而,应用户的要求,基于mozilla和 gecko的浏览器(如netscape 6)决定在2000年5月19以后的版本支持此属性(mozilla m16及以后的版本,netscape 6 pr2及以后的版本)。让我们来看个例子:通过点击按钮来刷新计数器的值。

    <div id="counter">点击的次数 = 0</div>
    <form>
    <input type="button" value="增加计数" onclick="updatemessage()">
    </form>
    <script language="javascript">
    <!--
    var hits = 0; 
    function updatemessage() {
    hits += 1;
    document.getelementbyid("counter").innerhtml = "点击的次数 = " + hits;
    }
    // -->
    </script>
 
    当点击按钮时函数updatemessage()被调用一次,点击的次数增加1,div标记里的内容更新一次。

本文关键:Netscape 6 DHTML编程
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top