Prototype - Element Object

Advertisements

Previous Page
Next Page  

The Element object provides various utility functions for manipulating elements in the DOM.

Here is the list of all the utility functions with examples. All the methods defined here are automatically added to any element accessed using the $() function.

So, writing Element.show('firstDiv'); is the same as writing $('firstDiv').show();

Prototype Element Method

NOTE − Make sure you have at least version 1.6 of prototype.js.

S.No. Method & Description
1. absolutize()

Turns element into an absolutely-positioned element without changing its position in the page layout.
2. addClassName()

Adds the given CSS class name to the element's class names.
3. addMethods()

Makes it possible to mix in your own methods to the Element object, which you can later use as methods of extended elements.
4. adjacent()

Finds all siblings of the current element that match the given selector(s).
5. ancestors()

Collects all of element's ancestors and returns them as an array of extended elements.
6. childElements()

Collects all of the element's children and returns them as an array of extended elements.
7.

classNames()

Deprecated. Returns a new instance of ClassNames, an Enumerable object used to read and write CSS class names of element.
8. cleanWhitespace()

Removes all of element's text nodes, which contain only whitespace. Returns element.
9. clonePosition()

Clones the position and/or dimensions of source onto element as defined by the optional argument options.
10. cumulativeOffset()

Returns the offsets of element from the top left corner of the document.
11. cumulativeScrollOffset()

Calculates the cumulative scroll offset of an element in nested scrolling containers.
12. descendantOf()

Checks if the element is a descendant of ancestor.
13. descendants()

Collects all of element's descendants and returns them as an array of extended elements.
14. down()

Returns element's first descendant that matches cssRule. If no cssRule is provided, all descendants are considered. If no descendant matches these criteria, undefined is returned.
15. empty()

Tests whether element is empty (i.e., contains only whitespace).
16. extend()

Extends element with all of the methods contained in Element.Methods and Element.Methods.Simulated.
17. fire()

Fires a custom event with the current element as its target.
18. firstDescendant()

Returns the first child that is an element. This is opposed to firstChild DOM property, which will return any node.
19. getDimensions()

Finds the computed width and height of an element and returns them as key/value pairs of an object.
20.

getElementsByClassName

Deprecated. Fetches all of element's descendants, which have a CSS class of className and returns them as an array of extended elements. Please use $$().
21.

getElementsBySelector

Deprecated. Takes an arbitrary number of CSS selectors (strings) and returns an array of extended children of element that match any of them. Please use $$().
22. getHeight()

Finds and returns the computed height of element.
23. getOffsetParent()

Returns element's closest positioned ancestor. If none is found, the body element is returned.
24. getStyle()

Returns the given CSS property value of element. Property can be specified in either of its CSS or camelized form.
25. getWidth()

Finds and returns the computed width of element.
26. hasClassName()

Checks whether element has the given CSS className.
27. hide()

Hides and returns element.
28. identify()

Returns element's id attribute if it exists, or sets and returns a unique, auto-generated id.
29.

immediateDescendants()

Deprecated. Collects all of the element's immediate descendants (i.e., children) and returns them as an array of extended elements. Please use childElements().
30. insert()

Inserts content before, after, at the top of, or at the bottom of element.
31. inspect()

Returns the debug-oriented string representation of element.
32. makeClipping()

Simulates the poorly supported CSS clip property by setting element's overflow value to 'hidden'. Returns element.
33. makePositioned()

Allows for the easy creation of CSS containing block by setting element's CSS position to 'relative' if its initial position is either 'static' or undefined. Returns element.
34. match()

Checks if element matches the given CSS selector.
35. next()

Returns element's following sibling that matches the given cssRule.
36. nextSiblings()

Collects all of element's next siblings and returns them as an array of extended elements.
37. observe()

Registers an event handler on element and returns element.
38. positionedOffset()

Returns element's offset relative to its closest positioned ancestor.
39. previous ()

Returns element's previous sibling that matches the given cssRule.
40. previousSiblings()

Collects all of element's previous siblings and returns them as an array of extended elements.
41. readAttribute()

Returns the value of element's attribute or null if attribute has not been specified.
42. recursivelyCollect()

Recursively collects elements whose relationship is specified by property.
43. relativize()

Turns element into an relatively-positioned element without changing its position in the page layout.
44. remove ()

Completely removes element from the document and returns it.
45. removeClassName()

Removes element's CSS className and returns element.
46. replace ()

Replaces element by the content of the html argument and returns the removed element.
47. scrollTo ()

Scrolls the window so that element appears at the top of the viewport. Returns element.
48. select()

Takes an arbitrary number of CSS selectors (strings) and returns an array of extended descendants of element that match any of them.
49. setOpacity()

Sets the visual opacity of an element while working around inconsistencies in various browsers.
50. setStyle()

Modifies element's CSS style properties.
51. show()

Displays and returns element.
52. siblings()

Collects all of element's siblings and returns them as an array of extended elements.
53. stopObserving()

Unregisters handler and returns element.
54. toggle()

Toggles the visibility of element.
55. toggleClassName()

Toggles element's CSS className and returns element.
56. undoClipping()

Sets element's CSS overflow property back to the value it had before Element.makeClipping() was applied. Returns element.
57. undoPositioned()

Sets element back to the state it was before Element.makePositioned was applied to it. Returns element.
58. up()

Returns element's first ancestor that matches the given cssRule.
59. update()

Replaces the content of element with the provided newContent argument and returns element.
60. viewportOffset()

Returns the X/Y coordinates of element relative to the viewport.
61. visible()

Returns a Boolean indicating whether or not element is visible.
62. wrap()

Wraps an element inside another, then returns the wrapper.
63. writeAttribute()

Adds, specifies or removes attributes passed as either a hash or a name/value pair.
Advertisements