NN6 Dhtml 编程基础 [重新修改了图片]

NN6 Dhtml 编程基础 [重新修改了图片]

作者：http://lucky.myrice.com
E-mail:[email protected]

---

   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标记里的内容更新一次。
    顾名思义，innerHTML属性值代表HTML标记里的内容，即一个完整标记的内容。比如上例<DIV ID="counter">点击的次数 = 0</DIV>中<DIV></DIV>里的内容“点击的次数 = 0”。
    innerHTML属性也可以包含许多HTML 标记，例如：
    <DIV ID="counter2"><FONT COLOR="red">点击的次数 = 0</FONT></DIV>
    此时的innerHTML的内容为：<FONT COLOR="red">点击的次数 = 0</FONT>
    可以通过下面的方法进行刷新内容：
    document.getElementById("counter2").innerHTML = "<FONT COLOR='purple'>点击的次数 = " + hits + "</FONT>";

3.水平和垂直移动元素

    编写DHTML代码最头疼的一件事情就是浏览器无关地在屏幕上移动元素，当我们提起元素水平位置和垂直位置时，自然会想到left和top，Netscape Navigator使用left和top属性，但Internet Explorer使用style的pixelLeft和pixelTop属性，Netscape 6则使用W3C规范的left和top属性，由于Internet Explorer 5以上版本的浏览器也支持此属性，因此，我们可以编写浏览器无关的水平移动元素的脚本代码：
   
  <FORM>
  <INPUT ID="counter1" STYLE="position:relative; left:'0px'" TYPE="button" VALUE="移动按钮"
  onclick="document.getElementById('counter1').style.left = '100px';">
  </FORM>

    单击上面的代码生成的按钮时，可以看到它移动到100px的位置，如果你不写上单位px，你不会出错，但那不是W3C/DOM推荐使用的。

4.设定元素坐标值

    设定和取得元素位置的浏览器无关W3C规范的办法是通过style元素的left和top属性来实现的，尽管这些属性被解释为物理计量单位，即字符串，这些字符串包含一个数字和一个“px”。我们在设定这些属性的时候，必须在数字的后面加上“px”。例如：给ID="counter1"的元素设定水平位置为 xlocation，我们应当写：

    document.getElementById('counter1').style.left = xlocation + "px";

   如果不写“px”，浏览器也能识别。浏览器会认为计量单位是px，会自动加上它。但你要获取元素位置的时候，结果总是带"px" 的字符串。

document.getElementById('counter1').style.left = xlocation;

The browser assumes the unit of measure is pixels and will add the "px" automatically. You'll always get a "px"-ended string when querying the top and left properties.
 
    记住left和top的返回值是很重要的，否则，你的浏览器会报告错误啊。如果你需要他们的数值时，可以使用parseInt()方法，此方法把字符串从左到右转换成整数，当没有整数可以进行转换的时候，转换停止。例如：parseInt("50px") 的结果是 50。下面的代码在你每按一次按钮的时候，按钮位置增加50px。

 <FORM>
 <INPUT ID="counter1" STYLE="position:relative; left:'0px'" TYPE="button"
 VALUE="移动按钮" onclick="handleClick()">
 </FORM>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var xlocation = parseInt(document.getElementById('counter1').style.left);
 function handleClick() {
   xlocation += 50;
   document.getElementById('counter1').style.left = xlocation + "px";
 }
 // -->
 </SCRIPT>

5.元素的可视性

  要编写浏览器无关的设定和获取元素可视性的方法是采用W3C规范的推荐的style元素的visibility属性。visibility可以取以下三个值：

    1.""，即 空字符串
    2."hidden"
    3."visible"

    当元素的visibility值为""或为"visible"时，元素在浏览器里是可见的，为"hidden"时，则不可见。要检测某元素的可视性，有两个办法：
  if (visibility == "")...
  或者:
  if (visibility != "hidden")...

6.元素闪烁效果的实现

    <blank>标记是Netscape Navigator特有的，Netscape 6将会在以后取消这一标记。W3C规范推荐使用样式单style的text-decoration:blink来实现这一效果，但它只有Netscape Navigator 和 Netscape 6支持，Internet Explorer仍旧不支持这一效果。下面的两行代码在Netscape Navigator 和 Netscape 6里都会闪烁，

    <BLINK>此行文字在Netscape Navigator 和 Netscape 6应当闪烁</BLINK>
    <DIV STYLE="text-decoration:blink">此行文字在Netscape Navigator和Netscape 6应当闪烁</DIV>

    由于Internet Explorer不支持闪烁效果，因此编写浏览器无关的代码最好的办法就是交替设定元素的可视性为显示和隐藏。[可参考本人的另一个帖子]
http://www.csdn.net/develop/read_article.asp?id=3431

---

---