Prototype框架是怎样扩展DOM的

核心提示：Prototype框架最大的部分就是对DOM的扩展，Prototype框架里的$()函数返回一个网页DOM元素，Prototype框架是怎样扩展DOM的，框架给这个元素添加了很多方便的方法，举个例子：你可以写这样的代码 $('comments').addClassName('active'

Prototype框架最大的部分就是对DOM的扩展。Prototype框架里的$()函数返回一个网页DOM元素，框架给这个元素添加了很多方便的方法。举个例子：你可以写这样的代码 $('comments').addClassName('active').show() ，用来取得ID是“comments”的元素，给它添加一个CSS的ClassName并且显示它（假设之前是隐藏的）。本来在JavaScript里，“comments”元素是没有这些方法可用的；这是怎么实现的呢？这篇文章揭示了几个在Prototype框架里用到的技巧。

用 Element.addMethods() 添加你自己的方法

如果你有自己的DOM方法想要添加到Prototype的那一大堆方法里去凑凑热闹，没问题！Prototype也为此提供了一种机制。假设你有一组函数封装在一个对象里，只要把这个对象交给 Element.addMethods() 就可以了：

var MyUtils = {
　　truncate: function(element, length){
　　 　element = $(element);
　　 　return element.update(element.innerHTML.truncate(length));
　　},
　　updateAndMark: function(element, html){
　　 　return $(element).update(html).addClassName('updated');
　　}
}
Element.addMethods(MyUtils);
// 现在你可以：
$('explanation').truncate(100);

唯一需要注意的事情就是要确保这些方法的第一个参数是元素自身。在你的方法里，你还可以在最后返回这个元素以实现可链性（或者，就像例子里实践的那样，实现自身返回元素的方法）。

Element.extend() 方法

大多数扩展DOM方法都是封装在Element.Methods对象里的，并被复制到Element对象（提供方便之用）。这些方法都把要操作的元素作为第一个参数来接受。