学习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 οnclick="$('message').addClassName('STYLE1'); ">点我一下看！</button>
<div class="" id="message">这是一个测试字符串</div>
</body>
</html>
运行结果如下： 
点击按钮后如下： 
这里要说明的是名为STYLE1的样式在hello/css/test.css文件里定义着，代码如下：
.STYLE1 {
font-size: 24px;
font-weight: bold;
color:#FF0000
}
实例2：替换div中的内容：
<button οnclick="$('message').addClassName('STYLE1').update('I read this message!'); ">点我一下看！</button>
<div class="" id="message">这是一个测试字符串</div>
运行： 
点击后： 
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
