Dom object method aggregation in Prototype _ prototype

This part provides a lot of convenient dom operations (writing is a little annoying) Methods: including the famous $ method, document. the getElementsByClassName method, as well as a detailed description of the following parts of the Element Object and Insertion object:

$ (Element ):GetElementById encapsulation. An element can be an Element id, element itself, or an array. In this case, an array is returned. Using the $ method, the Element is automatically called. extend (element) method, so that the Element can directly call the method in the Element, such as element. hide (element) can be written as $ (element ). hide ()

Document. getElementsByClassName (className, parentElement ):Select element based on class

Element. extend (element ):Extends the element so that the element can directly call the methods defined in Element, Form. Element, or Form.

Method 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 following parameters are basically the same)
Toggle: function (element ):Reverse element visibility
Hide: function (element ):Hide Element
Show: function (element ):Display Element
Remove: function (element ):Remove Element
Update: function (element, html ):Use html to update the content of an element. The script in html will be executed (the same below)
Replace: function (element, html ):Replace element with html
Inspect: function (element ):Element string representation
RecursivelyCollect: function (element, property ):Recursive collection. For example, Element. recursivelyCollect (element, "parentNode") returns all the ancestor nodes of the element. Note that only elements with nodeType = 1 are returned, that is, no text Element is returned.
Ancestors: function (element ):Equivalent to the above example, all the ancestor nodes of the element are returned.
Descendants: function (element ):Back to all child nodes
ImmediateDescendants: function (element ):Returns the array of the direct child node (child node) of the element.
Previussiblings: function (element ):Returns the sibling node before the element.
NextSiblings: function (element ):Returns the sibling node behind the element.
Siblings: function (element ):Returns all sibling nodes of the element.
Match: function (element, selector ):Use the match method of Selector to match the elements (Selector will be introduced later). The selector parameter is a css selector expression or a Selector instance in Prototype. If the element matches the selector, true is returned, otherwise, false is returned. For example, for a p whose className is logcss, the following expression returns true, $ (element ). match ("p. logcss ") to be continued ..

// Update

Up (element, expression, index ):Use Selector. the findElement method is used to locate the element whose index is an index consisting of all elements conforming to the expression in the ancestor node of the element. You can also ignore the expression (default: *, indicating that all elements are matched) and index (0 by default), directly call up (element, index) or up (element)
Down (element, expression, index ):Like up, only child nodes are returned.
Previous (element, expression, index ):Returns the previous sibling node.
Next (element, expression, index ):Returns the sibling Node
GetElementsBySelector (element, args ):Selector. findChildElements (element, args) encapsulation. args indicates that multiple parameters can be passed. Each parameter is a css selector expression, returns an array of elements that match any css selector expression in the child node of the element.
GetElementsByClassName (element, className ):Returns the element that matches the clsssName in the child node of the element.
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, or other methods, therefore, in many cases, an error occurs when calling (the two methods of the function are used in many parts of Prototype). For example, in the following example (an example in the official document), you can only use readAttribute:

...

...

...

$ ('P. widget '). invoke ('readattribute', 'widget _ id ')
// ["7", "8", "9"]

// Update 2006-12-1

GetHeight: function (element ):Return element height. return element. offsetHeight
ClassNames: function (element ):Returns an Element. classNames object, which provides operations on the Element class, including add, remove, and set. It is rarely used and uses Element. addClassName and other methods (as shown below)
HasClassName: function (element, className ):Determine whether the element contains className
AddClassName: function (element, className ):Add a class to the element
RemoveClassName: function (element, className ):Removes a class from an element.
Observe ():Call the observe method of the Event object (which will be described later in Prototype) to register the Event handle for the element.
StopObserving ():Remove the registered event handle
CleanWhitespace: function (element ):Remove blank text subnode from the element
Empty: function (element ):Determines whether the element is empty.
ChildOf: function (element, ancestor ):Determine whether the element is ancestor's child node
ScrollTo: function (element ):Move the scroll bar to the position where the element is located.
GetStyle: function (element, style ):Obtains the value of a css style of an element, for example, $ (element). getStyle ("float ")
SetStyle: function (element, style ):Set the css style of the element. Eleven objects of the style, such as element. setStyle ({left: "40px", "background-color": "#666 "})
GetDimensions: function (element ):The element size can be returned correctly even if the element is hidden. An associated array such as return {width: originalWidth, height: originalHeight} is returned.
MakePositioned: function (element ):If the position css attribute of an element is static or does not exist, change the attribute to relative.
UndoPositioned: function (element ):Operations opposite to makePositioned
Makateping: function (element ):Change the element to clipping, that is, set the overflow attribute of the element to hidden.
UndoClipping: function (element ):Reverses the modification made to the element by the above method.
HasAttribute (element ):Determines whether an element has an attribute.

Are there many methods for Element objects? haha, the following describesFour Insertion classes

Insertion. Before: insert the content to the front of the element. The content is outside the element.
Insertion. Top: insert the content to the Top of the element. The content is in the element.
Insertion. Bottom: insert the content to the Bottom of the element. The content is in the element.
Insertion. After: insert the content to the end of the element. The content is outside the element.

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

Finally, there are quite a few Element Methods for Prototype.

Although I used to think that I was still familiar with Prototype and I was a little tired of writing it, I found that I had gained a lot. In order to write down the specific functions and usage of these methods, you must force yourself to figure out Prototype code in a row, so that you have a deeper understanding and understanding of many elaborate Prototype writing methods.

The main purpose of this tutorial is to give you a quick reference. You can check the source code to see how it actually improves.