Summary of dom object methods in Prototype_prototype

以下部分一个一个的详细介绍：

$(element)：getElementById的封装，element可以是一个元素的id或元素本身，也可以是一个数组，这时返回一个数组，使用$方法，会自动调用Element.extend(element)方法，这样的话使元素可以直接调用Element中的方法, 例如Element.hide(element)可以写成这样$(element).hide()

document.getElementsByClassName(className, parentElement): 根据class选择元素

Element.extend(element): 扩展element，使element可以直接调用Element、Form.Element或Form中定义的方法

Element对象的方法：

visible: function(element)：判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element)：反转element的可见性
hide: function(element)：隐藏元素
show: function(element)：显示元素
remove: function(element)：移除元素
update: function(element, html) ：使用html更新element的内容，html中的script会执行(下同)
replace: function(element, html)：将element替换为html
inspect: function(element)：element的字符串表示
recursivelyCollect: function(element, property): 递归收集, 例如Element.recursivelyCollect(element, "parentNode")返回element所有的祖先节点, 注意只返回nodeType == 1的元素，也就是不返回文本元素
ancestors: function(element): 等同于上面的例子，返回元素的所有祖先节点
descendants: function(element): 返回所有子孙节点
immediateDescendants: function(element)：返回元素的直接的子孙节点(子节点)的数组
previousSiblings: function(element)：返回元素前面的兄弟节点
nextSiblings: function(element)：返回位于元素后面的兄弟节点
siblings: function(element)：返回元素所有的兄弟节点
match: function(element, selector)：使用Selector的match方法匹配元素(Selector将在后面介绍), selector参数是一个css selector表达式或者Prototype中的一个Selector实例，如果element匹配selector则返回true，否则返回false，例如对于一个className为logcss的div来说，下面的表达式返回true, $(element).match("div.logcss") 待续。。

//update 2006-11-30 09:40

up(element, expression, index)：利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素，也可以忽略expression(默认为*，表示匹配所有元素)和index(默认为0)，直接这样调用up(element, index)或up(element)
down(element, expression, index)：跟up一样，只是返回的是子孙节点
previous(element, expression, index)：返回前面的兄弟节点
next(element, expression, index)：返回后面的兄弟节点
getElementsBySelector(element,args)：Selector.findChildElements(element, args)的封装，args表示可以传递多个参数，每个参数是一个css selector表达式，返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组
getElementsByClassName(element, className)：返回element中的子孙节点中符合clsssName的元素
readAttribute(element, name)：return $(element).getAttribute(name)，之所以添加这个方法是因为在IE和Safari(Mac)中getAttribute不是一个真正的函数，它没有call、apply等方法，所以在很多时候调用会出现错误(Prototype中很多地方使用了函数的这两个方法)，例如下面的例子(官方文档中的一个例子)，就只能使用readAttribute：

...

...

...

$$('div.widget').invoke('readAttribute', 'widget_id')
// ["7", "8", "9"]

//Update 2006-12-1

getHeight: function(element): Returns the element height, return element.offsetHeight
classNames: function(element): Returns an Element.ClassNames object, change the object to provide Operations on element classes, including add, remove, set, etc., are generally rarely used. Just use Element.addClassName and other methods (just below)
hasClassName: function (element, className): Determine whether element contains className
addClassName: function(element, className):Add a class to element
removeClassName: function(element, className):Remove element A class in
observe(): calls the observe method of the Event object (in Prototype, which will be introduced later) to register the event handle for the element
stopObserving(): Remove registered event handle
cleanWhitespace: function(element):Remove blank text sub-nodes in the element
empty: function(element):Judge the element Whether it is empty
childOf: function(element, ancestor): Determine whether element is a descendant node of ancestor
scrollTo: function(element): Move the scroll bar to the element Where
getStyle: function(element, style): Get the value of a certain css style of the element, such as $(element).getStyle("float")
setStyle: function(element, style): Set the css style of the element, style has eleven objects, such as element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element): Get the dimensions of the element. Even if the element is hidden, it can be returned correctly. Return an associative array such as return {width: originalWidth, height: originalHeight}
makePositioned : function(element): When the position css attribute of the element is static or does not exist, change the secondary attribute to relative
undoPositioned: function(element): Operation opposite to makePositioned
makeClipping: function(element): Turn the element into clipping (slicing), that is, set the overflow attribute of the element to hidden
undoClipping: function(element): Inverse Change the modifications made to the element by the above method
hasAttribute(element): Determine whether the element has a certain attribute

Element object has many methods, haha. Let’s introduce the four classes of Insertion

Insertion.Before: insert the content in front of the element, the content is outside the element
Insertion.Top: insert the content To the top of the element, the content is inside the element
Insertion.Bottom: Insert the content to the bottom of the element, the content is inside the element
Insertion.After: Insertion the content After the element, the content is outside the element

The method to use them is relatively simple: new Insertion.where(element, content), where where represents the above Before, Top, etc., and content is an html string. Note that the javascript fragment will be executed

Finally finished writing, Prototype has quite a lot of Element methods

Although I used to feel that I was relatively familiar with Prototype and was a little tired from writing, I found that I still gained a lot. In order to write down the specific functions and usage of these methods, I had to force myself to write the Prototype code line by line. Clearly, I have a deeper understanding of many exquisite writing methods in Prototype

The main purpose of writing this tutorial is to give you a quick reference. Only by comparing it with the source code can you really improve