动态HTML教程（三）

【 tulaoshi.com - Html 】

  今天我们将开始学习动态HTML最精彩的部分：动态HTML编程。HTM之所以成功的原因之一在于它提供了在互联网上展现网页的统一方式。一旦你标识了一个网页，它在任何地方都可以看到。Javascript也是如此。及时它的版本会有很多种，但它的核心和语法是统一的，它在支持Javascript的所有浏览器中都可以应用。CSS也具有统一的语法。在所有的浏览器中它的显示结果也应该是一致的。所以它能帮助你生成跨平台风格一致的动态网页。

  但是，还有一些小问题。

  在1997中期时，Netscape和Microsoft都推出了自己的动态HTML浏览器，但那时没有一种规范编程语言同网页元素之间的交流的统一规定。但是在那时已经有了JavaScript同网页中的图象、链接和表单元素进行交流的规范。然而这两家公司对于如何控制网页元素存在不同的见解。

  Netscape对JavaScript加入了一系列的对象，并引入了<LAYER标签，伴随产生的便是它的dHTML 理念：－或者采用<LAYER标签分层的内容分层，或者<DIV标签的CSS定位，它们可以用Javascript的对象访问，而且它的属性(left, top, visibility,和background color)可以被控制。

  但是微软走得更深入一些。它推出了全新的HTML生成引擎，它不仅能定位任何元素，还能改变对CSS设置的任何选项。（例如，你可以改变字体或你的EM标签) ，而且，它还完善了文件对象模块（Document Object Model），使其能通过任何支持的编程或脚本语言访问。 这两种体制之间的明显区别在于其语法。Netscape 支持树
形语法：

  document.layers['topLayer'].document.layers['subLayer'].document.layers['bottom'].left

  而Internet Explorer将所有的HTML对象都放在一个水平结构上，使你可以修改也是对象：

bottom.style.left

  如果你在这种浏览器中使用了另一种浏览器支持的方法，则浏览器会显示错误信息。但是还有许多技术可以对这种不兼容性作出变通处理。一旦你掌握了其中的诀窍，你就可以左右逢源，无所不能。本课中将学习如何利用最少量的条件访问文件对象模块DOM，然后我们将介绍一个将对象在屏幕中移动的简单Javascript脚本。

  首先我们学习为两种浏览器生成不同的动态HTML。我不打算在此列出两种浏览器各自的动态HTML特点，我只列出两种浏览器所支持的相同的动态HTML功能。

  你可以看到它们之间没有完全相同的项目。object.name似乎相同，但是对对象使用CSS时必须制定ID属性，所以你只能对图象、链接和表单 使用该功能。所以为了编写脚本，你必须设定很多条件。听起来很痛苦，但其实还不象你想象的那么糟。

  有很多中办法可以利用Javascript设定条件。其中办法是确定用户所使用的浏览器的类型和版本，并据此作出评估。现在我还发现了更好的解决办法。

  浏览器类型和版本条件设定的第1个问题是浏览器的改变的问题。如果你将浏览器版本设定为Internet Explorer 4.0和Netscape 4.0，那么等5.0版的浏览器发布时你的网页会发生什么情况？或者这两种新发布的浏览器版本互相兼容，而你的脚本中都没有考虑到这些问题又会如何？ 所以根据浏览器类型和版本设定条件的方法不可行。

  更好的方法是根据功能设定条件。如果你读过Javascript教程 ，你一定知道Javascript的"if"语句中测试一个语句返回的是真true (1)还是假false (0)，然后它将根据返回的布尔值执行一个语句。通常情况下它被用来测试某些变量的条件，例如：

  if (x<=5) setTimeout('doSomething()', 500);

  但是一个对象是否存在也可以作为被测试的条件。如果某个对象存在，则返回真，否则返回假。所以为了提供一个有效的测试条件，你必须从某个特定角度来测试一个对象的代表性质以便应用动态HMTL。

  Netscape利用分层运行动态HTML。它的运行方式同图象数组在Navigator中的方式类似。你设定一个分层对象的数组，象对图象的引用那样设定引用方式。所以document.layers['foobar'] 则是代表被相对定位或是绝对定位了的<DIV的对象 (在Netscape 模式中，它必须是在你的文件NAME或ID属性为"foobar"的一个绝对定位或相对定位了的<DIV或<SPAN)。然后你就可以设定上述各种属性。你还可以用document.foobar来代表这个对象。

  在Internet Explorer中，则用一种水平的结构来代表对象。所以ID或NAME属性为foobar的<DIV就是foobar，所以你可以用foobar.style.left来访问或设定这个对象的左边的位置。还有许多种循环访问一系列对象的方法（非常有用）。在Explorer的文件对象模块（Document Object Model）中，对象可以代表所有在该对象之下的对象（object object object）。所以foobar.all 包含所有包含在foobar之下的HTML标签。无论什么时候你都可以找到一个很好的类属对象－document.all，因为所有的网页中都有一个文件（docu