Element |
The Element object sports a flurry of powerful DOM methods which you can access either as methods of Element (but that’s rather old-fashioned now) or directly as methods of an extended element (thanks to Element.extend for that added bit of syntactic sugar).
Before you pursue, you really should read “How Prototype extends the DOM” which will walk you through the arcane inner workings of Prototype’s magic DOM extension mechanism.
On this page
<div id="message" class=""></div>
$('message').addClassName('read'); // Toggle the CSS class name of div#message // -> div#message
Element.toggleClassName('message', 'read'); // You could also use a syntactic-sugar-free version: // -> div#message
Since most methods of Element return the element they are applied to, you can chain methods like so:
$('message').addClassName('read').update('I read this message!').setStyle({opacity: 0.5});
Isn’t that just beautiful?!
addClassName
addClassName(element, className) -> HTMLElement
Adds a CSS class to element.
addMethods
addMethods([methods])
Takes a hash of methods and makes them available as methods of extended elements and of the Element object.
ancestors
ancestors(element) -> [HTMLElement...]
Collects all of element’s ancestors and returns them as an array of extended elements.
classNames
classNames(element) -> [className...]
Returns a new instance of ClassNames, an Enumerable object used to read and write class names of the element.
cleanWhitespace
cleanWhitespace(element) -> HTMLElement
Removes all of element's text nodes which contain only whitespace. Returns element.
descendantOf
descendantOf(element, ancestor) -> Boolean
Checks if element is a descendant of ancestor.
descendants
descendants(element) -> [HTMLElement...]
Collects all of element’s descendants and returns them as an array of extended elements.
down
down(element[, cssRule][, index = 0]) -> HTMLElement | undefined
Returns element’s first descendant (or the n-th descendant if index is specified) that matches cssRule. If no cssRule is provided, all descendants are considered. If no descendant matches these criteria, undefined is returned.
empty
empty(element) -> Boolean
Tests whether element is empty (i.e. contains only whitespace).
extend
extend(element)
Extends element with all of the methods contained in Element.Methods and Element.Methods.Simulated. If element is an input, textarea or select tag, it will also be extended with the methods from Form.Element.Methods. If it is a form tag, it will also be extended with Form.Methods.
getDimensions
getDimensions(element) -> {height: Number, width: Number}
Finds the computed width and height of element and returns them as key/value pairs of an object.
getElementsByClassName
getElementsByClassName(element, className) -> [HTMLElement...]
Fetches all of element’s descendants which have a CSS class of className and returns them as an array of extended elements.
getElementsBySelector
getElementsBySelector(element, selector...) -> [HTMLElement...]
Takes an arbitrary number of CSS selectors (strings) and returns a document-order array of extended children of element that match any of them.
getHeight
getHeight(element) -> Number
Finds and returns the computed height of element.
getStyle
getStyle(element, property) -> String | null
Returns the given CSS property value of element. property can be specified in either of its CSS or camelized form.
getWidth
getWidth(element) -> Number
Finds and returns the computed width of element.
hasClassName
hasClassName(element, className) -> Boolean
Checks whether element has the given CSS className.
hide
hide(element) -> HTMLElement
Hides and returns element.
immediateDescendants
immediateDescendants(element) -> [HTMLElement...]
Collects all of the element’s immediate descendants (i.e. children) and returns them as an array of extended elements.
inspect
inspect(element) -> String
Returns the debug-oriented string representation of element.
makeClipping
makeClipping(element) -> HTMLElement
Simulates the poorly supported CSS clip property by setting element's overflow value to 'hidden'. Returns element.
makePositioned
makePositioned(element) -> HTMLElement
Allows for the easy creation of CSS containing block by setting an element's CSS position to 'relative' if its initial position is either 'static' or undefined. Returns element.
match
match(element, selector) -> Boolean
Checks if element matches the given CSS selector.
next
next(element[, cssRule][, index = 0]) -> HTMLElement | undefined
Returns element’s following sibling (or the index’th one, if index is specified) that matches cssRule. If no cssRule is provided, all following siblings are considered. If no following sibling matches these criteria, undefined is returned.
nextSiblings
nextSiblings(element) -> [HTMLElement...]
Collects all of element’s next siblings and returns them as an array of extended elements.
observe
observe(element, eventName, handler[, useCapture = false]) -> HTMLElement
Registers an event handler on element and returns element.
previous
previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined
Returns element's previous sibling (or the index'th one, if index is specified) that matches cssRule. If no cssRule is provided, all previous siblings are considered. If no previous sibling matches these criteria, undefined is returned.
previousSiblings
previousSiblings(element) -> [HTMLElement...]
Collects all of element’s previous siblings and returns them as an array of extended elements.
readAttribute
readAttribute(element, attribute) -> String | null
Returns the value of element's attribute or null if attribute has not been specified.
recursivelyCollect
recursivelyCollect(element, property) -> [HTMLElement...]
Recursively collects elements whose relationship is specified by property. property has to be a property (a method won’t do!) of element that points to a single DOM node. Returns an array of extended elements.
remove
remove(element) -> HTMLElement
Completely removes element from the document and returns it.
removeClassName
removeClassName(element, className) -> HTMLElement
Removes element’s CSS className and returns element.
replace
replace(element[, html]) -> HTMLElement
Replaces element by the content of the html argument and returns the removed element.
scrollTo
scrollTo(element) -> HTMLElement
Scrolls the window so that element appears at the top of the viewport. Returns element.
setStyle
setStyle(element, styles) -> HTMLElement
Modifies element’s CSS style properties. Styles are passed as a hash of property-value pairs in which the properties are specified in their camelized form.
show
show(element) -> HTMLElement
Displays and returns element.
siblings
siblings(element) -> [HTMLElement...]
Collects all of element’s siblings and returns them as an array of extended elements.
stopObserving
stopObserving(element, eventName, handler) -> HTMLElement
Unregisters handler and returns element.
toggle
toggle(element) -> HTMLElement
Toggles the visibility of element.
toggleClassName
toggleClassName(element, className) -> HTMLElement
Toggles element’s CSS className and returns element.
undoClipping
undoClipping(element) -> HTMLElement
Sets element’s CSS overflow property back to the value it had before makeClipping() was applied. Returns element.
undoPositioned
undoPositioned(element) -> HTMLElement
Sets element back to the state it was before makePositioned() was applied to it. Returns element.
up
up([cssRule][, index = 0]) -> HTMLElement | undefined
Returns element’s first ancestor (or the index’th ancestor, if index is specified) that matches cssRule. If no cssRule is provided, all ancestors are considered. If no ancestor matches these criteria, undefined is returned.
update
update(element[, newContent]) -> HTMLElement
Replaces the content of element with the provided newContent argument and returns element.
visible
visible(element) -> Boolean
Returns a Boolean indicating whether or not element is visible (i.e. whether its inline style property is set to "display: none;").
|
Prototype API 1.5.0 - prototypejs.org