以下部分一个一个的详细介绍： [b]$(element)：[/b]getElementById的封装，element可以是一个元素的id或元素本身，也可以是一个数组，这时返回一个数组，使用$方法，会自动调用Element.extend(element)方法，这样的话使元素可以直接调用Element中的方法, 例如Element.hide(element)可以写成这样$(element).hide() [b]document.getElementsByClassName(className, parentElement):[/b] 根据class选择元素 [b]Element.extend(element):[/b] 扩展element，使element可以直接调用Element、Form.Element或Form中定义的方法 [b]Element对象的方法：[/b] [b]visible: function(element)：[/b]判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的) [b]toggle: function(element)：[/b]反转element的可见性 [b]hide: function(element)：[/b]隐藏元素 [b]show: function(element)：[/b]显示元素 [b]remove: function(element)：[/b]移除元素 [b]update: function(element, html) ：[/b]使用html更新element的内容，html中的script会执行(下同) [b]replace: function(element, html)：[/b]将element替换为html [b]inspect: function(element)：[/b]element的字符串表示 [b]recursivelyCollect: function(element, property):[/b] 递归收集, 例如Element.recursivelyCollect(element, "parentNode")返回element所有的祖先节点, 注意只返回nodeType == 1的元素，也就是不返回文本元素 [b]ancestors: function(element): [/b]等同于上面的例子，返回元素的所有祖先节点 [b]descendants: function(element):[/b] 返回所有子孙节点 [b]immediateDescendants: function(element)：[/b]返回元素的直接的子孙节点(子节点)的数组 [b]previousSiblings: function(element)：[/b]返回元素前面的兄弟节点 [b]nextSiblings: function(element)：[/b]返回位于元素后面的兄弟节点 [b]siblings: function(element)：[/b]返回元素所有的兄弟节点 [b]match: function(element, selector)：[/b]使用Selector的match方法匹配元素(Selector将在后面介绍), selector参数是一个css selector表达式或者Prototype中的一个Selector实例，如果element匹配selector则返回true，否则返回false，例如对于一个className为logcss的div来说，下面的表达式返回true, $(element).match("div.logcss") 待续。。 [b]//update 2006-11-30 09:40[/b] [b]up(element, expression, index)：[/b]利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素，也可以忽略expression(默认为*，表示匹配所有元素)和index(默认为0)，直接这样调用up(element, index)或up(element) [b]down(element, expression, index)：[/b]跟up一样，只是返回的是子孙节点 [b]previous(element, expression, index)：[/b]返回前面的兄弟节点 [b]next(element, expression, index)：[/b]返回后面的兄弟节点 [b]getElementsBySelector(element,args)：[/b]Selector.findChildElements(element, args)的封装，args表示可以传递多个参数，每个参数是一个css selector表达式，返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组 [b]getElementsByClassName(element, className)：[/b]返回element中的子孙节点中符合clsssName的元素 [b]readAttribute(element, name)：[/b]return $(element).getAttribute(name)，之所以添加这个方法是因为在IE和Safari(Mac)中getAttribute不是一个真正的函数，它没有call、apply等方法，所以在很多时候调用会出现错误(Prototype中很多地方使用了函数的这两个方法)，例如下面的例子(官方文档中的一个例子)，就只能使用readAttribute： <div id="widgets"> <div class="widget" widget_id="7">...</div> <div class="widget" widget_id="8">...</div> <div class="widget" widget_id="9">...</div> </div> $$('div.widget').invoke('readAttribute', 'widget_id') // ["7", "8", "9"] [b]//Update 2006-12-1[/b] [b]getHeight: function(element)：[/b]返回元素高度，return element.offsetHeight [b]classNames: function(element)：[/b]返回一个Element.ClassNames对象，改对象提供对元素class的操作，包括add、remove、set等，一般很少使用，使用Element.addClassName等方法就可以了(就在下面) [b]hasClassName: function(element, className) ：[/b]判断element是否含有className [b]addClassName: function(element, className) ：[/b]给element添加一个class [b]removeClassName: function(element, className) ：[/b]移除元素中的一个class [b]observe()：[/b]调用Event对象(Prototype中的，将在后面介绍)的observe方法为元素注册事件handle [b]stopObserving() ：[/b]移除注册的事件handle [b]cleanWhitespace: function(element)：[/b]移除元素中空白的文本子节点 [b]empty: function(element)：[/b]判断元素是否为空 [b]childOf: function(element, ancestor) ：[/b]判断element是否为ancestor的子孙节点 [b]scrollTo: function(element) ：[/b]滚动条移动到元素所在的地方 [b]getStyle: function(element, style) ：[/b]得到元素某个css样式的值，例如$(element).getStyle("float") [b]setStyle: function(element, style) ：[/b]设置元素的css样式，style十一个对象，例如element.setStyle({left: "40px", "background-color":"#666"}) [b]getDimensions: function(element) ：[/b]得到元素的尺寸，即使元素是隐藏的也可以正确的返回，返回 return {width: originalWidth, height: originalHeight}这样的关联数组 [b]makePositioned: function(element) ：[/b]当元素的position css属性为static或不存在使，将次属性更改为relative [b]undoPositioned: function(element) ：[/b]跟makePositioned相反的操作 [b]makeClipping: function(element) ：[/b]把元素变成clipping(切片)，也就是设置元素的overflow属性为hidden [b]undoClipping: function(element)：[/b]反转上面的方法对元素所做的修改 [b]hasAttribute(element)：[/b]判断元素是否有某个属性 Element对象的方法是不是不少啊，哈哈，下面介绍有关[b]Insertion的四个类[/b] Insertion.Before：将内容插入到元素的前面，内容在元素外面 Insertion.Top：将内容插入到元素的顶部，内容在元素里面 Insertion.Bottom：将内容插入到元素的底部，内容在元素里面 Insertion.After：将内容插入到元素后面，内容在元素外面 使用它们的方法比较简单：new Insertion.where(element, content)，其中where表示上面的Before、Top等，content是html字符串，注意其中javascript片断会执行 终于写完了，Prototype的Element方法还真不少 虽然以前觉得自己对Prototype还比较熟悉，写的也有点累，但是发现自己收获仍然挺大的，为了写出这些方法的具体作用和用法，必须强迫自己一行行的把Prototype的代码弄清楚，使自己对Prototype中很多精巧的写法有了更深刻的认识和理解 写这个教程的主要目的是为了给大家一个快速的参考，大家还是对照着源代码看才会真正有所提高