prototype Element study notes (Part 2)_prototype

The first parameter of all functions is: element, which represents the reference of the element to be operated. This is to add these methods to the DOM object when Element.extend, using the methodize function. There is no need to enter the first parameter when calling, such as:
var b=$('div1').visible();
In addition, almost all functions will return themselves. Note that the expanded element The type is: HTMLElement. One advantage of doing this is that it is convenient to write code continuously, such as:
　$('div1').update().insert('This is the newly inserted content');
One advantage of writing code this way is that it is highly readable and easy to write.
The following is the function introduction:
visible(element):Boolean
Whether the element is visible (depends on element.style.display)
toggle(element): HTMLElement
If the element is visible, make it invisible , make it visible if it is not visible. Then returns a reference to the element itself. (Depending on element.style.display)
hide(element): HTMLElement
Hide the element. (Depends on element.style.display)
　show(element): HTMLElement
　Display element. (Depending on element.style.display)
Remove(element): HTMLElement
Remove the element itself (return the deleted element after deletion).
Update(element, content): HTMLElement
Similar to element.innerHTML, adding processing scripts and other functions. It inserts the content first and then executes the script in the content.
Replace(element, content): HTMLElement
Replace the current element. and returns the replaced element.
insert(element, insertions): HTMLElement
Insert content at the specified position of element. The value of insertions is as follows:
string/number/element, for example: 'this is the string to insert!!', default Inserted into the bottom position of the element.
{top:xxxxx,bottom:yyyy,before:zzzzz,after:aaaa}, for example: {top:'this the content you will insert!'}.
The return value is element.
　wrap(element, wrapper, attributes): HTMLElement
　Wrap another element outside element. Usually used for masking.
Wrapper: elementId, element, tagName, attrbutes (when the created cover is a div, the tag setting can be omitted)
Attributes: a JSON object used to set the style of the element, such as: {color: "red" ,backgroundImage:"url(header.gif)"}
$('win1').wrap('div1',{color: "#666"});
$('win1').wrap( 'span',{font-size:12});
　$('win1').wrap({color: "#666"});
　Returns a reference to the created mask.
Inspect(element): string
Generates a string representing the current element, for example:

, which has only two attributes, not equal to toHTML().
recursivelyCollect(element, property): HTMLElement[]
It’s hard to describe, for example: $('div1').recursivelyCollect('firstchild'), it returns all elements in div1 that are the eldest child.
ancestors(element): HTMLElement[]
Returns all the direct ancestors of this element. For example: if there is an element div1, its parent is div2, and the parent of div2 is div3. It keeps calling like this.
Descendants(element): HTMLElement[]
Returns an array of all descendant element nodes. Equivalent to element.select('*').
firstDescendant(element): HTMLElement
Returns the first son. All sons (excluding grandchildren, great-grandchildren...oh).
ImmediateDescendants(element): HTMLElement[]
Returns all sons (excluding grandchildren, great-grandchildren...oh).
previousSiblings(element): HTMLElement[]
Return all siblings.
NextSiblings(element): HTMLElement[]
Return all siblings.
Siblings(element): HTMLElement[]
Returns all siblings, sorted in order of "largest to smallest" (the order of appearance in html).
match(element, selector): Boolean
Whether the element satisfies the specified selector
up(element, expression, index): HTMLElement
In element.ancestors(), an array that satisfies the expression expression , the index element, the example is as follows:
$('div1').up('div',1) returns a reference to the element with the label div and the serial number 1 among the direct ancestors.
　down(element, expression, index): HTMLElement
　 Returns the index-th element among the descendants that satisfies the selector expression.
previous(element, expression, index): HTMLElement
previous(element, expression, index): HTMLElement
There is no suspense about these two, return the previous one, the next one, the previous n, and the next n.
Select(element, selector1, selector2,...): HTMLElement[]
Returns an array of elements in the descendants that satisfy the selector. There is a union relationship between multiple selectors.
　adjacent(element,selector): HTMLElement[]
　Returns all brothers that satisfy the selector, excluding itself.
Identify(element): string
If there is an id, return the existing id, if not, take an id. and return.
readAttribute(element, name): string
read attribute
writeAttribute(element, name, value): HTMLElement
write attribute

=========== ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　　　　　　　　　　　　　　　　　　　　ulate Generally used to obtain and set various coordinates. In web pages, there are several common coordinates of an element, but they are as follows:
1.
relative to the upper left corner of the document 2. Relative to the upper left corner of the viewport
3. Relative to a certain element
Looking at the codes in each framework, there are only three types of coordinates to obtain. Let’s briefly describe one or two below.
　getHeight(element), getWidth(element), equivalent to finding clientHeight, clientWidth.
classNames(element): Element.ClassNames
hasClassName(element, className): Boolean
addClassName(element, className): HTMLElement
removeClassName(element, className): HTMLElement
toggleClassName(element , className): HTMLElement
cleanWhitespace(element): HTMLElement, delete the blank text node
empty(element): Boolean, whether the element content is blank
descendantOf(element, ancestor): Boolean, determine whether the element is blank It is the descendant of a certain element, and ancestor is the id or element reference.
scrollTo(element): HTMLElement, scroll to this element and return a reference to this element.
　getStyle(element, style): The type is undefined and returns the value of a certain style of the element.
　getOpacity(element): Float, returns transparency.
SetStyle(element, styles): HTMLElement, set the style of the element, styles is a JSON object.
setOpacity(element, value): HTMLElement, set the transparency of the element.
　getDimensions(element): {width:x,height:y}. Return clientWidth, clientHeight.
　makePositioned(element): HTMLElement, set position to relative. Does not set the location to the current location.
undoPositioned(element): HTMLElement, set the position of the element to the default value.
MakeClipping(element): HTMLElement, set the overflow of the element.
undoClipping(element): HTMLElement, clear overflow.
CumulativeOffset(element): Element._returnOffset, obtains the offset relative to the entire page.
PositionedOffset(element): Element._returnOffset, obtains the element offset relative to the first position that is not static. If they are all static, they are relative to the page.
Absolutize(element): HTMLElement, set position to absolute, and set the position to the current position.
relativize(element): HTMLElement, set position to ralative, and set the position to the current position.
CumulativeScrollOffset(element): Element._returnOffset, relative to the sum of the scrollOffset of the top-level container, is not necessarily a document, because there is an iframe in the page.
GetOffsetParent(element): HTMLElement, it’s easy to say if you have studied CSS, no need to say more.
　viewportOffset(element): Element._returnOffset, find the offset relative to the upper left corner of the viewport.
ClonePosition(element, source): HTMLElement, clones the position attribute from source to itself.