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标记里的内容更新一次。