The following sections are detailed one by one:
$(element)：getElementById encapsulation, element can be the id of an element or the element itself, or an array. At this time, an array is returned. Using the $ method, the element method will be automatically called, so that the element can directly call the method in the Element. For example, (element) can be written as $(element).hide()
(className, parentElement):Select elements according to class
(element):Extend element so that element can directly call Element or methods defined in Form
Methods of Element object:
visible: function(element)：Determine whether the element is visible. The parameter element can be the element itself or the element id (the parameters below are basically the same)
toggle: function(element)：Reversal element visibility
hide: function(element)：Hide elements
show: function(element)：Display elements
remove: function(element)：Remove elements
update: function(element, html) ：Use html to update the content of the element, and the script in html will be executed (same below)
replace: function(element, html)：Replace element with html
inspect: function(element)：String representation of element
recursivelyCollect: function(element, property):Recursive collection, for example (element, "parentNode") returns all the ancestor nodes of element, note that only the element with nodeType == 1 is returned, that is, no text element is returned
ancestors: function(element): Equivalent to the above example, returns all ancestor nodes of the element
descendants: function(element):Return to all descendants nodes
immediateDescendants: function(element)：Returns an array of direct descendant nodes (child nodes) of the element
previousSiblings: function(element)：Returns the sibling node in front of the element
nextSiblings: function(element)：Returns the sibling node behind the element
siblings: function(element)：Return all sibling nodes of the element
match: function(element, selector)：Use the Selector's match method to match elements (Selector will be introduced later). The selector parameter is a css selector expression or a Selector instance in the Prototype. If the element matches the selector, it returns true, otherwise it returns false. For example, for a div with className logcss, the following expression returns true, $(element).match("") to be continued. .
//update 2006-11-30 09:40
up(element, expression, index)：Use the method to find the element whose array index is indexed as index in the ancestor node of the element element. You can also ignore the expression (default is *, indicating that all elements are matched) and index (default is 0), and call up(element, index) or up(element) in this way.
down(element, expression, index)：Just like up, it returns the descendants node
previous(element, expression, index)：Return to the previous brother node
next(element, expression, index)：Return to the subsequent brother node
getElementsBySelector(element,args)：(element, args) encapsulation, args means that multiple parameters can be passed, each parameter is a css selector expression, returning an array of elements in the descendants of the element that meets any css selector expression
getElementsByClassName(element, className)：Returns the element in the descendant node in the element that matches the clsssName
readAttribute(element, name)：return $(element).getAttribute(name). The reason for adding this method is because in IE and Safari(Mac), getAttribute is not a real function. It does not have call, apply and other methods, so many times there will be errors when calling (the two methods of functions are used in many places in Prototype). For example, in the following example (an example in the official document), you can only use readAttribute:
<div >
<div class="widget" widget_>...</div>
<div class="widget" widget_>...</div>
<div class="widget" widget_>...</div>
</div>
$$('').invoke('readAttribute', 'widget_id')
// ["7", "8", "9"]
//Update 2006-12-1
getHeight: function(element)：Return element height, return
classNames: function(element)：Return an object, and modify the object to provide operations on element class, including add, remove, set, etc. It is usually rarely used, and it is enough to use it (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 a class from the element
observe()：Calling the observe method of Event object (in Prototype, will be introduced later) registers event handles for elements
stopObserving() ：Remove registered event handle
cleanWhitespace: function(element)：Remove blank text child nodes in elements
empty: function(element)：Determine whether the element is empty
childOf: function(element, ancestor) ：Determine whether element is a descendant of the ancestor
scrollTo: function(element) ：The scrollbar moves to the element where it is
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 eleven objects, for example ({left: "40px", "background-color":"#666"})
getDimensions: function(element) ：Get the size of the element, and it can be returned correctly even if the element is hidden, and return an associative array like 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) ：The opposite operation to makePositioned
makeClipping: function(element) ：Turn the element into clipping, that is, set the overflow attribute of the element to hidden
undoClipping: function(element)：Reverse the above method to modify the element
hasAttribute(element)：Determine whether an element has a certain attribute
Are there many methods for Element objects? Haha, the following is aboutFour categories of Insertion
: Insert the content in front of the element, and the content is outside the element
: Insert the content on the top of the element, and the content is inside the element
: Insert the content at the bottom of the element, and the content is inside the element
: Insert the content behind the element, and the content outside the element
The method of using them is relatively simple: new (element, content), where where represents the above Before, Top, etc., the content is an html string. Note that the javascript fragment will be executed
Finally finished writing, there are quite a lot of Element methods for Prototype
Although I used to feel familiar with Prototype and I was a little tired of writing, I found that I still gained a lot. In order to write the specific functions and usage of these methods, I had to force myself to figure out the code of Prototype line by line, so that I have a deeper understanding and understanding of many exquisite writing methods in Prototype
The main purpose of writing this tutorial is to give you a quick reference. You can only make some improvements by looking at the source code.