Prototype系列之一：Prototype如何操作DOM

tianmingqi · 发表于 2013-1-29 07:44:02

学习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>

运行结果如下：

点击按钮后如下：

这里要说明的是名为STYLE1的样式在hello/css/test.css文件里定义着，代码如下：

.STYLE1 {font-size: 24px;font-weight: bold;color:#FF0000}

实例2：替换div中的内容：

<button >点我一下看！</button><div class="" id="message">这是一个测试字符串</div>

运行：

点击后：

		自动登录	找回密码
密码			立即注册