Summary of DOM object methods in prototype _prototype

The following sections provide a detailed description of one:

$ (Element):getElementById encapsulation, element can be an element of the ID or elements themselves, can also be an array, then return an array, using the $ method, will automatically call Element.extend ( Element) method so that the elements can be called directly from the method in the elemental, for example, element.hide (element) can be written as such $ (element). Hide ()

document.getelementsbyclassname (ClassName, parentelement): Selecting elements based on class

element.extend (Element): expands the element so that the element can invoke the method defined in element, form.element, or Form directly

method of the element object:

visible:function (Element):To determine whether an element is visible, the parameter element can be either the element itself or the element ID (the following parameters are basically the case)
toggle:function (Element):Reverses the visibility of an element
hide:function (Element):Hide elements
show:function (Element):Display elements
remove:function (Element):removing elements from
update:function (element, HTML):Use HTML to update element content, script in HTML executes (same below)
replace:function (element, HTML):To replace an element with HTML
inspect:function (Element):String representation of Element
recursivelycollect:function (element, property):Recursive collection, such as element.recursivelycollect (element, "ParentNode") returns all ancestor nodes of the element, noting that only the elements of NodeType = = 1 are returned, i.e. no text elements are returned
ancestors:function (Element):Equivalent to the example above, all ancestor nodes of the element are returned
descendants:function (Element):Return all Descendants node
immediatedescendants:function (Element):Returns an array of the immediate descendants (child) nodes of an element
previoussiblings:function (Element):Return sibling node in front of element
nextsiblings:function (Element):Returns the sibling node at the back of the element
siblings:function (Element):Returns all sibling nodes of the element
match:function (element, selector):Using the selector match method matching element (selector will be introduced later), the selector parameter is a CSS selector expression or a prototype instance in the selector. Returns true if the element matches selector, or False if, for example, for a classname-logcss div, the following expression returns True, $ (element). Match ("Div.logcss") Cond..

//update 2006-11-30 09:40

Up (element, expression, index): The Selector.findelement method is used to find an array index with all elements of an element element that conforms to the expression expression, or to ignore expression (the default is *, which means matching all elements) and index (default 0), call up the up (element, index) or up (element)
(element, expression, index) directly as follows: as Up, Just return the Descendants node
Previous (element, expression, index): return to the previous sibling node
Next (element, expression , index): return to the following sibling node
getelementsbyselector (Element,args): selector.findchildelements ( element, args, args means that multiple arguments can be passed, each of which is a CSS selector expression that returns an array of elements in the descendant node of the element that conform to any one of the CSS selector expressions
Getelementsbyclassname (element, className): Returns the elements in the descendant node of the element that conform to Clsssname
Readattribute ( element, Name: return $ (Element). getattribute (name) is added because GetAttribute is not a real function in IE and Safari (MAC). It does not have call, apply, and so on, so many times there are errors in invocation (the two methods of the function are used in many places in prototype), such as the following example (an example in an official document), which can only be used 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"]

Update 2006-12-1

getheight:function (Element):Returns the element height, return element.offsetheight
classnames:function (Element):Returns a Element.classnames object, changes the object to provide to the element class the operation, including Add, remove, set and so on, generally rarely uses, uses element.addclassname and so on the method to be possible (just below)
hasclassname:function (element, className):Determine if element contains classname
addclassname:function (element, className):Add a class to Element
removeclassname:function (element, className):Remove one class from an element
observe ():The observe method that invokes the event object (described later in prototype) registers events for the element handle
stopobserving ():To remove registered events handle
cleanwhitespace:function (Element):To remove a blank text child node in an element
empty:function (Element):Determines whether an element is empty
childof:function (element, ancestor):Determine if the element is a descendant of ancestor
scrollto:function (Element):The scroll bar moves to where the element is located
getstyle:function (element, style):Gets the value of one of the CSS styles for an element, such as $ (element). GetStyle ("float")
setstyle:function (element, style):Sets the CSS style for the element, style 11 objects, such as Element.setstyle ({left: "40px", "Background-color": "#666"})
getdimensions:function (Element):To get the dimensions of the element, even if the element is hidden, you can return it correctly, returning the associative array such as return {width:originalwidth, height:originalheight}
makepositioned:function (Element):When the element's position CSS property is static or does not exist, the secondary property is changed to relative
undopositioned:function (Element):Operation Contrary to makepositioned
makeclipping:function (Element):Turn the elements into clipping (slices), which is to set the overflow property of the element to hidden
undoclipping:function (Element):Reverses the modifications made to the element by the above method
Hasattribute (Element):Determine if an element has an attribute

The method of element object is not a lot ah, haha, here are four classes about insertion

Insertion.before: Inserts content into front of element, content outside element
Insertion.top: Inserts content into the top of the element, inside the element
Insertion.bottom: Inserts the content into the element's bottom, the content inside the element
Insertion.after: Inserts the content behind the element, and the content is outside the element

The way to use them is simpler: new Insertion.where (element, content), where the before, top, and so on, content is an HTML string, note that the JavaScript fragment executes

Finally, prototype's element method is very much

Although I used to feel that I was familiar with the prototype, write a bit tired, but found that their harvest is still very large, in order to write out the specific role and use of these methods, you must force yourself a line of the prototype code to find out, So that I have a deeper understanding and understanding of the many ingenious writing in prototype.

The main purpose of writing this tutorial is to give you a quick reference, we still have to look at the source code will really improve