Prototype系列之一：Prototype如何操作DOM
学习Prototype框架，最基础的就是如何对dom进行操作。可以通过一个简单的$()函数取得dom中的元素对象。比如你可以书写$('comments').addClassName('active').show() 来获得ID为 'comments'的元素, 并为此元素添加一个 名称为'active'的class，最后显示它 (如果它原来为hidden)。在原始的JavaScript中 'comments' 元素并没有这些方法（比如这里的addClassName('active').show() ），而使用Prototype框架就可以使用这些方法方便地实现相应的功能。Prototype框架把原始的javascript操作dom的方法使用形式如：Element.Methods的方法封装了。下面看一个例子。首先到http://www.prototypejs.org/download下载此框架，解压缩后最重要的是prototype.js文件（你下载的可能不是这个名字，比如带有版本号prototype1.6.0xxx0.0.js,本人觉得不方便就手动修改为了prototype.js）。
第二步就是把这个文件放入到web应用目录下，例如webapps\hello\javascripts\prototype.js。
实例1：$()函数的使用、为div标记添加样式。
在hello站点目录下创建hello.html,代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript"src="javascripts/prototype.js"></script><link href="css/test.css" rel="stylesheet" type="text/css" /></head><body><button >点我一下看！</button><div class="" id="message">这是一个测试字符串</div></body></html>
运行结果如下：
http://www.agoit.com/upload/attachment/59970/b6cf089d-0772-31e2-bb10-deb28e29ee12.jpg
点击按钮后如下：
http://www.agoit.com/upload/attachment/59972/09e07fb2-9dd0-3e35-bc58-fa8db4e9edad.jpg
这里要说明的是名为STYLE1的样式在hello/css/test.css文件里定义着，代码如下：
.STYLE1 {font-size: 24px;font-weight: bold;color:#FF0000}
实例2：替换div中的内容：
<button >点我一下看！</button><div class="" id="message">这是一个测试字符串</div>
运行：
http://www.agoit.com/upload/attachment/59974/9e1ea991-2101-3050-af60-52f049fff168.jpg
点击后：
http://www.agoit.com/upload/attachment/59976/ae578f9b-7e43-34ae-bd85-253280304403.jpg
页:
[1]