Your SlideShare is downloading. ×
0
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Element
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Element

1,208

Published on

Prototype Javascript

Prototype Javascript

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,208
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Elements
  • 2. <ul><li>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). </li></ul>
  • 3. Example <ul><li><div id=&quot;message&quot; class=&quot;&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>   $( 'message' ).addClassName( 'read' ); // Toggle the CSS class name of div#message </li></ul><ul><li>   // -> div#message </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>   Element.toggleClassName( 'message' ,  'read' ); // You could also use a syntactic-sugar-free version: </li></ul><ul><li>   // -> div#message </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>Since most methods of Element return the element they are applied to, you can chain methods like so: </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>   $( 'message' ).addClassName( 'read' ).update( 'I read this message!' ).setStyle({opacity </li></ul>
  • 4. addClassName <ul><li>addClassName(element, className) -> HTMLElement </li></ul><ul><li>Adds a CSS class to element. </li></ul><ul><li>Example: </li></ul><ul><li><div id=&quot;mutsu&quot; class=&quot;apple fruit&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).addClassName( 'food' ) </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).className </li></ul><ul><li>// -> 'apple fruit food' </li></ul><ul><li>$( 'mutsu' ).classNames() </li></ul><ul><li>// -> ['apple', 'fruit', 'food'] </li></ul>
  • 5. addMethods <ul><li>addMethods([methods])   </li></ul><ul><li>Takes a hash of methods and makes them available as methods of extended elements and of the Element object. </li></ul><ul><li>Element.addMethods makes it possible to mix in your own methods to the Element object, which you can later use as methods of extended elements - those returned by the $() utility, for example - or as methods of Element. </li></ul><ul><li>  </li></ul><ul><li>$(element).myOwnMethod([args...]); </li></ul><ul><li>  </li></ul><ul><li>Note that this will also works: </li></ul><ul><li>  </li></ul><ul><li>Element.myOwnMethod(element|id[, args...]); </li></ul><ul><li>  </li></ul><ul><li>To add new methods, simply feed Element.addMethods with a hash of methods. Note that each method's first argument has to be element. Inside each method, remember to pass element to $() and to return it to allow for method chaining if appropriate. </li></ul>
  • 6. addMethods (con’t) <ul><li>Eg: Hash </li></ul>var  myVeryOwnElementMethods = {    myFirstMethod:  function ( element [, args...]){      element  = $( element );      // do something      return   element ;    },      mySecondMethod:  function ( element [, args...]){      element  = $( element );      // do something else      return   element ;    } };
  • 7. <ul><li>Want clean, semantic markup, but need that extra <div> around your element, why not create a wrap('tagName') Element method which encloses element in the provided tagName and returns the wrapper? </li></ul><ul><li>  </li></ul><ul><li>Element.addMethods({ </li></ul><ul><li>   wrap:  function ( element , tagName) { </li></ul><ul><li>     element  = $( element ); </li></ul><ul><li>     var  wrapper = document.createElement( 'tagName' ); </li></ul><ul><li>     element.parentNode.replaceChild(wrapper,  element ); </li></ul><ul><li>     wrapper.appendChild( element ); </li></ul><ul><li>     return  Element.extend(wrapper); </li></ul><ul><li>   } </li></ul><ul><li>}); </li></ul>
  • 8. <ul><li>which you'll be able to use like this: </li></ul><ul><li>  </li></ul><ul><li>// Before: </li></ul><ul><li><p id=&quot;first&quot;>Some content...</p> </li></ul><ul><li>  </li></ul><ul><li>$( element ).wrap( 'div' ); </li></ul><ul><li>// -> HTMLElement (div) </li></ul><ul><li>  </li></ul><ul><li>// After: </li></ul><ul><li><div><p id=&quot;first&quot;>Some content...</p></div> </li></ul><ul><li>  </li></ul>
  • 9. <ul><li>As you have thoughtfully decided that your wrap() method would return the newly created <div>, ready for prime time thanks to Element.extend, you can immediately chain a new method to it: </li></ul><ul><li>  </li></ul><ul><li>$(element).wrap('div').setStyle({backgroundImage: 'url(images/rounded-corner-top-left.png) top left'}); </li></ul><ul><li>  </li></ul><ul><li>Are you using Ajax.Updater quite a bit around your web application to update DOM elements? Would you want a quick and nifty solution to cut down on the amount of code you are writing ? Try this: </li></ul><ul><li>  </li></ul><ul><li>Element.addMethods({ </li></ul><ul><li>   ajaxUpdate:  function ( element , url, options){ </li></ul><ul><li>     element  = $( element ); </li></ul><ul><li>     element.update( '<img src=&quot;/images/spinner.gif&quot; alt=&quot;loading...&quot; />' ); </li></ul><ul><li>     new  Ajax.Updater( element , url, options); </li></ul><ul><li>     return   element ; </li></ul><ul><li>   } </li></ul><ul><li>}); </li></ul>
  • 10. <ul><li>Now, whenever you wish to update the content of an element just do: </li></ul><ul><li>  </li></ul><ul><li>$( element ).ajaxUpdate( '/new/content' ); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>This method will first replace the content of element with one of those nifty Ajax activity indicator. It will then create a new Ajax.Updater, which in turn will update the content of element with its request result, removing the spinner as it does. </li></ul>
  • 11. Using Element.addMethods with no argument <ul><li>There's a last dirty little secret to Element.addMethods. You can can call it without passing it an argument. What happens then? Well, it simply iterates over all of Element.Methods, Element.Methods.Simulated, Form.Methods and Form.Element.Methods and adds them to the relevant DOM elements (Form.Methods only gets added to, well the form element while input, select and textarea elements get extended with Form.Element.Methods). </li></ul>
  • 12. When could that be useful? <ul><li>Imagine that you wish to add a method that deactivates a submit button and replaces its text with something like &quot;Please wait...&quot;. You wouldn't want such a method to be applied to any element, would you? So here is how you would go about doing that: </li></ul><ul><li>  </li></ul><ul><li>Form.Element.Methods.processing =  function ( element , text) { </li></ul><ul><li>   element  = $( element ); </li></ul><ul><li>   if  (element.tagName.toLowerCase() ==  'input'  && [ 'button' ,  'submit' ].include(element.type)) </li></ul><ul><li>     element.value =  typeof  text ==  'undefined'  ?  'Please wait...'  : text; </li></ul><ul><li>   return  element.disable(); </li></ul><ul><li>}; </li></ul><ul><li>  </li></ul><ul><li>Element.addMethods(); </li></ul><ul><li>  </li></ul>
  • 13. ancestors :: Element <ul><li>The returned array’s first element is element’s direct ancestor (its parentNode), the second one is its grandparent and so on until the html element is reached. html will always be the last member of the array… unless you are looking for its ancestors obviously. But you wouldn’t do that, would you ? </li></ul><ul><li>  </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 14. Examples <ul><li><html> </li></ul><ul><li>[…] </li></ul><ul><li>   <body> </li></ul><ul><li>     <div id=&quot;father&quot;> </li></ul><ul><li>       <div id=&quot;kid&quot;> </li></ul><ul><li>       </div> </li></ul><ul><li>     </div> </li></ul><ul><li>   </body> </li></ul><ul><li></html> </li></ul><ul><li>  </li></ul><ul><li>$( 'kid' ).ancestors(); </li></ul><ul><li>// -> [div#father, body, html]  // Keep in mind that  </li></ul><ul><li>// the `body` and `html` elements will also be included! </li></ul><ul><li>  </li></ul><ul><li>document.getElementsByTagName( 'html' )[ 0 ].ancestors(); </li></ul><ul><li>// -> [] </li></ul><ul><li>  </li></ul>
  • 15. classNames :: Element <ul><li>classNames(element) -> [className...]  Returns a new instance of ClassNames, an Enumerable object used to read and write class names of the element.   </li></ul><ul><li>Practically, this means that you have access to your element's CSS classNames as an Enumerable rather than as the string that the native className property gives you (notice the singular form). </li></ul><ul><li>  </li></ul><ul><li>On top of that, this array is extended with a series of methods specifically targeted at dealing with CSS classNames: set(className), add(className) and remove(className). These are used internally by Element.addClassName, Element.toggleClassName and Element.removeClassName, but—unless you want to do some pretty wacky stuff—you usually won't need them. </li></ul><ul><li>  </li></ul>
  • 16. Examples <ul><li><div id=&quot;mutsu&quot; class=&quot;apple fruit food&quot;></div> $('mutsu').classNames()// -> ['apple', 'fruit', 'food'] // change its class names:$('mutsu').className = 'fruit round' $('mutsu').classNames()// -> ['fruit', 'round'] </li></ul>
  • 17. cleanWhitespace :: Element <ul><li>cleanWhitespace(element) -> HTMLElement  Removes all of element's text nodes which contain only whitespace. Returns element.   </li></ul><ul><li>cleanWhitespace() removes whitespace-only text nodes. This can be very useful when using standard methods like nextSibling, previousSibling, firstChild or lastChild to walk the DOM. </li></ul><ul><li>If you only need to access element nodes (and not text nodes), try using Element's new up() , down() , next() and previous() methods instead. You won't regret it! </li></ul>
  • 18. Example <ul><li>Consider the following HTML snippet: </li></ul><ul><li>  </li></ul><ul><li><ul id=&quot;apples&quot;> </li></ul><ul><li>   <li>Mutsu</li> </li></ul><ul><li>   <li>McIntosh</li> </li></ul><ul><li>   <li>Ida Red</li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>Let's grab what we think is the first list item: </li></ul><ul><li>  </li></ul><ul><li>var  element = $( 'apples' ); </li></ul><ul><li>element.firstChild.innerHTML; </li></ul><ul><li>// -> undefined </li></ul><ul><li>  </li></ul><ul><li>That doesn't seem to work to well. Why is that ? ul#apples's first child is actually a text node containing only whitespace that sits between <ul id=&quot;apples&quot;> and <li>Mutsu</li>. </li></ul>
  • 19. <ul><li>Let's remove all this useless whitespace: </li></ul><ul><li>  </li></ul><ul><li>element.cleanWhitespace(); </li></ul><ul><li>  </li></ul><ul><li>That's what our DOM looks like now: </li></ul><ul><li>  </li></ul><ul><li><UL id=&quot;apples&quot;><LI>Mutsu</LI><LI>McIntosh</LI><LI>Ida Red</LI></UL> </li></ul><ul><li>  </li></ul><ul><li>And guess what, firstChild now works as expected! </li></ul><ul><li>  </li></ul><ul><li>element.firstChild.innerHTML; </li></ul><ul><li>// -> 'Mutsu' </li></ul>
  • 20. descendantOf :: Element <ul><li>descendantOf(element, ancestor) -> Boolean   Checks if element is a descendant of ancestor.   </li></ul><ul><li>As descendantOf() internally applies $() to ancestor, it accepts indifferently an element or an element’s id as its second argument. </li></ul>
  • 21. Examples <ul><li><div id=&quot;australopithecus&quot;> </li></ul><ul><li>   <div id=&quot;homo-herectus&quot;> </li></ul><ul><li>     <div id=&quot;homo-sapiens&quot;></div> </li></ul><ul><li>   </div> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'homo-sapiens' ).descendantOf( 'australopithecus' ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>$( 'homo-herectus' ).descendantOf( 'homo-sapiens' ); </li></ul><ul><li>// -> false </li></ul>
  • 22. descendants :: Element <ul><li>descendants(element) -> [HTMLElement...]  Collects all of element’s descendants and returns them as an array of extended elements.   </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 23. Examples <ul><li><div id=&quot;australopithecus&quot;> </li></ul><ul><li>   <div id=&quot;homo-herectus&quot;> </li></ul><ul><li>     <div id=&quot;homo-neanderthalensis&quot;></div> </li></ul><ul><li>     <div id=&quot;homo-sapiens&quot;></div> </li></ul><ul><li>   </div> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>$('australopithecus').descendants(); </li></ul><ul><li>// -> [div#homo-herectus, div#homo-neanderthalensis, div#homo-sapiens] </li></ul><ul><li>  </li></ul><ul><li>$('homo-sapiens').descendants(); </li></ul><ul><li>// -> [] </li></ul>
  • 24. down :: Element <ul><li>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.   </li></ul><ul><li>The down() method is part of Prototype’s ultimate DOM traversal toolkit (check out up(), next() and previous() for some more Prototypish niceness). It allows precise index-based and/or CSS rule-based selection of any of the element’s descendants. </li></ul><ul><li>As it totally ignores text nodes (it only returns elements), you don’t have to worry about whitespace nodes. </li></ul><ul><li>And as an added bonus, all elements returned are already extended allowing chaining: </li></ul><ul><li>$(element).down(1).next('li', 2).hide(); </li></ul><ul><li>  </li></ul><ul><li>Walking the DOM has never been that easy! </li></ul>
  • 25. Arguments <ul><li>If no argument is passed, element’s first descendant is returned (this is similar as calling firstChild except down() returns an already extended element). </li></ul><ul><li>  </li></ul><ul><li>If an index is passed, element’s corresponding descendant is returned. (This is equivalent to selecting an element from the array of elements returned by the method descendants().) Note that the first element has an index of 0. </li></ul><ul><li>  </li></ul><ul><li>If cssRule is defined, down() will return the first descendant that matches it. This is a great way to grab the first item in a list for example (just pass in ‘li’ as the method’s first argument). </li></ul><ul><li>  </li></ul><ul><li>If both cssRule and index are defined, down() will collect all the descendants matching the given CSS rule and will return the one specified by the index. </li></ul><ul><li>  </li></ul><ul><li>In all of the above cases, if no descendant is found, undefined will be returned. </li></ul>
  • 26. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;> </li></ul><ul><li>     <ul> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>       <li id=&quot;mutsu&quot; class=&quot;yummy&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot; class=&quot;yummy&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul>
  • 27. <ul><li>$( 'fruits' ).down(); </li></ul><ul><li>// equivalent: </li></ul><ul><li>$( 'fruits' ).down( 0 ); </li></ul><ul><li>// -> li#apple </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).down( 3 ); </li></ul><ul><li>// -> li#golden-delicious </li></ul><ul><li>  </li></ul><ul><li>$( 'apples' ).down( 'li' ); </li></ul><ul><li>// -> li#golden-delicious </li></ul><ul><li>  </li></ul><ul><li>$( 'apples' ).down( 'li.yummy' ); </li></ul><ul><li>// -> li#mutsu </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).down( '.yummy' ,  1 ); </li></ul><ul><li>// -> li#mcintosh </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).down( 99 ); </li></ul><ul><li>// -> undefined </li></ul>
  • 28. empty :: Element <ul><li>empty(element) -> Boolean  Tests whether element is empty (i.e. contains only whitespace). </li></ul>
  • 29. Examples <ul><li><div id=&quot;wallet&quot;>     </div> </li></ul><ul><li><div id=&quot;cart&quot;>full!</div> </li></ul><ul><li>  </li></ul><ul><li>$('wallet').empty(); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>$('cart').empty(); </li></ul><ul><li>// -> false </li></ul><ul><li>  </li></ul>
  • 30. extend :: Element <ul><li>extend(element) </li></ul><ul><li>  </li></ul><ul><li>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. </li></ul>
  • 31. <ul><li>This is where the magic happens! </li></ul><ul><li>  </li></ul><ul><li>By extending an element with Prototype’s custom methods, we can achieve that syntactic sugar and ease of use we all crave for. For example, you can do the following with an extended element: </li></ul><ul><li>  </li></ul><ul><li>element.update('hello world'); </li></ul><ul><li>  </li></ul><ul><li>And since most methods of Element return the element they are applied to, you can chain methods like so: </li></ul><ul><li>  </li></ul><ul><li>element.update('hello world').addClassName('greeting'); </li></ul><ul><li>  </li></ul><ul><li>Note that all of the elements returned by Element methods are extended (yes even for methods like Element.siblings which return arrays of elements) and Prototype’s flagship utility methods $() and $$() obviously also return extended elements. </li></ul><ul><li>  </li></ul><ul><li>If you want to know more about how Prototype extends the DOM, jump to this article. </li></ul>
  • 32. getDimensions :: Element <ul><li>getDimensions(element) -> {height: Number, width: Number}  Finds the computed width and height of element and returns them as key/value pairs of an object.   </li></ul><ul><li>This method returns correct values on elements whose display is set to none either in an inline style rule or in an CSS stylesheet. </li></ul><ul><li>  </li></ul><ul><li>In order to avoid calling the method twice, you should consider caching the values returned in a variable as shown below. If you only need element’s width or height, consider using getWidth() or getHeight() instead. </li></ul><ul><li>  </li></ul><ul><li>Note that all values are returned as numbers only although they are expressed in pixels </li></ul>
  • 33. Examples <ul><li><div id=&quot;rectangle&quot; style=&quot;font-size: 10px; width: 20em; height: 10em&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>var  dimensions = $( 'rectangle' ).getDimensions(); </li></ul><ul><li>// -> {width: 200, height: 100} </li></ul><ul><li>  </li></ul><ul><li>dimensions.width; </li></ul><ul><li>// -> 200 </li></ul><ul><li>  </li></ul><ul><li>dimensions.height; </li></ul><ul><li>// -> 100 </li></ul>
  • 34. getElementsByClassName :: Element <ul><li>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.   </li></ul><ul><li>The returned array reflects the document order (e.g. an index of 0 refers to the topmost descendant of element with class className). </li></ul>
  • 35. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;>apples </li></ul><ul><li>     <ul> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>       <li id=&quot;mutsu&quot; class=&quot;yummy&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot; class=&quot;yummy&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>   </li> </li></ul><ul><li>   <li id=&quot;exotic&quot; class=&quot;yummy&quot;>exotic fruits </li></ul><ul><li>     <ul> </li></ul><ul><li>       <li id=&quot;kiwi&quot;>kiwi</li> </li></ul><ul><li>       <li id=&quot;granadilla&quot;>granadilla</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul>
  • 36. <ul><li>$( 'fruits' ).getElementsByClassName( 'yummy' ); </li></ul><ul><li>// -> [li#mutsu, li#mcintosh, li#exotic] </li></ul><ul><li>  </li></ul><ul><li>$( 'exotic' ).getElementsByClassName( 'yummy' ); </li></ul><ul><li>// -> [] </li></ul>
  • 37. getElementsBySelector :: Element <ul><li>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.   </li></ul><ul><li>This method is very similar to $$() and therefore suffers from the same caveats. However, since it operates in a more restricted scope (element’s children) it is faster and therefore a much better alternative. The supported CSS syntax is identical, so please refer to the $$() docs for details. </li></ul>
  • 38. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;> </li></ul><ul><li>     <h3 title=&quot;yummy!&quot;>Apples</h3> </li></ul><ul><li>     <ul id=&quot;list-of-apples&quot;> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot; title=&quot;yummy!&quot; >Golden Delicious</li> </li></ul><ul><li>       <li id=&quot;mutsu&quot; title=&quot;yummy!&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>     <p id=&quot;saying&quot;>An apple a day keeps the doctor away.</p>   </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul>
  • 39. <ul><li>$( 'apples' ).getElementsBySelector( '[title=&quot;yummy!&quot;]' ); </li></ul><ul><li>// -> [h3, li#golden-delicious, li#mutsu] </li></ul><ul><li>  </li></ul><ul><li>$( 'apples' ).getElementsBySelector(  'p#saying' ,  'li[title=&quot;yummy!&quot;]' ); </li></ul><ul><li>// -> [h3, li#golden-delicious, li#mutsu,  p#saying] </li></ul><ul><li>  </li></ul><ul><li>$( 'apples' ).getElementsBySelector( '[title=&quot;disgusting!&quot;]' ); </li></ul><ul><li>// -> [] </li></ul><ul><li>  </li></ul>
  • 40. getHeight :: Element <ul><li>getHeight(element) -> Number  Finds and returns the computed height of element.   </li></ul><ul><li>This method returns correct values on elements whose display is set to none either in an inline style rule or in an CSS stylesheet. For performance reasons, if you need to query both width and height of element, you should consider using getDimensions () instead. </li></ul>
  • 41. Examples <ul><li><div id=&quot;rectangle&quot; style=&quot;font-size: 10px; width: 20em; height: 10em&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$('rectangle').getHeight(); </li></ul><ul><li>// -> 100 </li></ul>
  • 42. getStyle :: Element <ul><li>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.   </li></ul><ul><li>This method looks up the CSS property of an element whether it was applied inline or in a stylesheet. It works around browser inconsistencies regarding float, opacity, which returns a value between 0 (fully transparent) and 1 (fully opaque), position properties (left, top, right and bottom) and when getting the dimensions (width or height) of hidden elements. </li></ul>
  • 43. Examples <ul><li>$( element ).getStyle( 'font-size' ); </li></ul><ul><li>// equivalent: </li></ul><ul><li>  </li></ul><ul><li>$( element ).getStyle( 'fontSize' ); </li></ul><ul><li>// -> '12px' </li></ul>
  • 44. Notes <ul><li>Internet Explorer returns literal values while other browsers return computed values. </li></ul><ul><li>  </li></ul><ul><li>Consider the following HTML snippet: </li></ul><ul><li>  </li></ul><ul><li><style> </li></ul><ul><li>   #test { </li></ul><ul><li>     font-size: 12px; </li></ul><ul><li>     margin-left: 1em; </li></ul><ul><li>   } </li></ul><ul><li></style> </li></ul><ul><li><div id=&quot;test&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$('test').getStyle('margin-left'); </li></ul><ul><li>// -> '1em' in Internet Explorer, </li></ul><ul><li>// -> '12px' elsewhere. </li></ul><ul><li>  </li></ul><ul><li>Safari returns null for any non-inline property if the element is hidden (has display set to 'none'). </li></ul><ul><li>  </li></ul><ul><li>Not all CSS shorthand properties are supported . </li></ul><ul><li>You may only use the CSS properties described in the Document Object Model (DOM) Level 2 Style Specification </li></ul>
  • 45. getWidth :: Element <ul><li>getWidth(element) -> Number  Finds and returns the computed width of element.   </li></ul><ul><li>This method returns correct values on elements whose display is set to none either in an inline style rule or in an CSS stylesheet. For performance reasons, if you need to query both width and height of element, you should consider using getDimensions () instead. </li></ul>
  • 46. Examples <ul><li><div id=&quot;rectangle&quot; style=&quot;font-size: 10px; width: 20em; height: 10em&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'rectangle' ).getWidth(); </li></ul><ul><li>// -> 200 </li></ul>
  • 47. hasClassName :: Element <ul><li>hasClassName(element, className) -> Boolean </li></ul><ul><li>  </li></ul><ul><li>Checks whether element has the given CSS className. </li></ul>
  • 48. Examples <ul><li><div id=&quot;mutsu&quot; class=&quot;apple fruit food&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).hasClassName( 'fruit' ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).hasClassName( 'vegetable' ); </li></ul><ul><li>// -> false </li></ul>
  • 49. hide :: Element <ul><li>hide(element) -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>Hides and returns element </li></ul>
  • 50. Examples <ul><li><div id=&quot;error-message&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'error-message' ).hide(); </li></ul><ul><li>// -> HTMLElement (and hides div#error-message) </li></ul>
  • 51. Backwards compatibility change <ul><li>In previous versions of Prototype, you could pass an arbitrary number of elements to Element.toggle, Element.show, and Element.hide, for consistency, this is no longer possible in version 1.5 ! </li></ul><ul><li>  </li></ul><ul><li>You can however achieve a similar result by using Enumerables: </li></ul><ul><li>  </li></ul><ul><li>[ 'content' ,  'navigation' ,  'footer' ]. each (Element.hide); </li></ul><ul><li>  </li></ul><ul><li>// -> ['content', 'navigation', 'footer']  </li></ul><ul><li>// and displays #content, #navigation and #footer. </li></ul><ul><li>  </li></ul><ul><li>or even better: </li></ul><ul><li>  </li></ul><ul><li>$( 'content' ,  'navigation' ,  'footer' ). invoke ('hide'); </li></ul><ul><li>  </li></ul><ul><li>// -> [HTMLElement, HTMLElement, HTMLElement] (#content, #navigation and #footer) </li></ul><ul><li>// and displays #content, #navigation and #footer. </li></ul>
  • 52. immediateDescendants :: Element <ul><li>immediateDescendants(element) -> [HTMLElement...]  Collects all of the element’s immediate descendants (i.e. children) and returns them as an array of extended elements.   </li></ul><ul><li>The returned array reflects the children order in the document (e.g., an index of 0 refers to the topmost child of element). </li></ul><ul><li>  </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 53. Examples <ul><li><div id=&quot;australopithecus&quot;> </li></ul><ul><li>   <div id=&quot;homo-herectus&quot;> </li></ul><ul><li>     <div id=&quot;homo-neanderthalensis&quot;></div> </li></ul><ul><li>     <div id=&quot;homo-sapiens&quot;></div> </li></ul><ul><li>   </div> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'australopithecus' ).immediateDescendants(); </li></ul><ul><li>// -> [div#homo-herectus] </li></ul><ul><li>  </li></ul><ul><li>$( 'homo-herectus' ).immediateDescendants(); </li></ul><ul><li>// -> [div#homo-neanderthalensis, div#homo-sapiens] </li></ul><ul><li>  </li></ul><ul><li>$( 'homo-sapiens' ).immediateDescendants(); </li></ul><ul><li>// -> [] </li></ul>
  • 54. inspect :: Element <ul><li>inspect(element) -> String  Returns the debug-oriented string representation of element.   </li></ul><ul><li>For more information on inspect methods, see Object.inspect. </li></ul>
  • 55. Example <ul><li><ul> </li></ul><ul><li>   <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>   <li id=&quot;mutsu&quot; class=&quot;yummy apple&quot;>Mutsu</li> </li></ul><ul><li>   <li id=&quot;mcintosh&quot; class=&quot;yummy&quot;>McIntosh</li> </li></ul><ul><li>   <li</li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'golden-delicious' ).inspect(); </li></ul><ul><li>// -> '<li id=&quot;golden-delicious&quot;>' </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).inspect(); </li></ul><ul><li>// -> '<li id=&quot;mutsu&quot; class=&quot;yummy apple&quot;>' </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).next().inspect(); </li></ul><ul><li>// -> '<li>' </li></ul>
  • 56. makeClipping :: Element <ul><li>makeClipping(element) -> HTMLElement  Simulates the poorly supported CSS clip property by setting element's overflow value to 'hidden'. Returns element.   </li></ul><ul><li>To undo clipping, use undoClipping () . </li></ul><ul><li>  </li></ul><ul><li>The visible area is determined by element's width and height. </li></ul>
  • 57. Example <ul><li><div id=&quot;framer&quot;> </li></ul><ul><li>   <img src=&quot;/assets/2007/1/14/chairs.jpg&quot; alt=&quot;example&quot; /> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'framer' ).makeClipping().setStyle({width:  '100px' , height:  '100px' }); </li></ul><ul><li>// -> HTMLElement </li></ul>
  • 58. makePositioned :: Element <ul><li>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. </li></ul><ul><li>  </li></ul><ul><li>To revert back to element's original CSS position, use undoPositioned () . </li></ul>
  • 59. Example <ul><li>Consider the following case: </li></ul><ul><li>  </li></ul><ul><li><p>lorem […]</p> </li></ul><ul><li><div id=&quot;container&quot;> </li></ul><ul><li>   <div id=&quot;element&quot; style=&quot;position: absolute; top: 20px; left: 20px;&quot;></div> </li></ul><ul><li></div> </li></ul>
  • 60. match :: Element <ul><li>match(element, selector) -> Boolean  Checks if element matches the given CSS selector. </li></ul>
  • 61. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;> </li></ul><ul><li>     <ul> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>       <li id=&quot;mutsu&quot; class=&quot;yummy&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot; class=&quot;yummy&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).match( 'ul' ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>$( 'mcintosh' ).match( 'li#mcintosh.yummy' ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).match( 'p' ); </li></ul><ul><li>// -> false </li></ul>
  • 62. next :: Element <ul><li>next(element[, cssRule][, index = 0]) -> HTMLElement | undefined </li></ul><ul><li>  </li></ul><ul><li>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. </li></ul>
  • 63. <ul><li>The next() method is part of Prototype’s ultimate DOM traversal toolkit (check out up(), down() and previous() for some more Prototypish niceness). It allows precise index-based and/or CSS rule-based selection of any of element’s following siblings . (Note that two elements are considered siblings if they have the same parent, so for example, the head and body elements are siblings—their parent is the html element.) </li></ul><ul><li>  </li></ul><ul><li>As it totally ignores text nodes (it only returns elements), you don’t have to worry about whitespace-only nodes. </li></ul><ul><li>  </li></ul><ul><li>And as an added bonus, all elements returned are already extended allowing chaining: </li></ul><ul><li>  </li></ul><ul><li>$(element).down(1).next('li', 2).hide(); </li></ul><ul><li>  </li></ul><ul><li>Walking the DOM has never been that easy! </li></ul>
  • 64. Arguments <ul><li>If no argument is passed, element’s following sibling is returned (this is similar as calling nextSibling except next() returns an already extended element). </li></ul><ul><li>If an index is passed, element’s corresponding following sibling is returned. (This is equivalent to selecting an element from the array of elements returned by the method nextSiblings()). Note that the sibling right below element has an index of 0. </li></ul><ul><li>If cssRule is defined, next() will return the element first following sibling that matches it. </li></ul><ul><li>If both cssRule and index are defined, previous() will collect all of element’s following siblings matching the given CSS rule and will return the one specified by the index. </li></ul><ul><li>  </li></ul><ul><li>In all of the above cases, if no following sibling is found, undefined will be returned </li></ul>
  • 65. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;> </li></ul><ul><li>     <h3 id=&quot;title&quot;>Apples</h3> </li></ul><ul><li>     <ul id=&quot;list-of-apples&quot;> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>       <li id=&quot;mutsu&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot; class=&quot;yummy&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot; class=&quot;yummy&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>     <p id=&quot;saying&quot;>An apple a day keeps the doctor away.</p>   </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul>
  • 66. <ul><li>$( 'list-of-apples' ).next(); </li></ul><ul><li>// equivalent: </li></ul><ul><li>$( 'list-of-apples' ).next( 0 ); </li></ul><ul><li>// -> p#sayings </li></ul><ul><li>  </li></ul><ul><li>$( 'title' ).next( 1 ); </li></ul><ul><li>// -> ul#list-of-apples </li></ul><ul><li>  </li></ul><ul><li>$( 'title' ).next( 'p' ); </li></ul><ul><li>// -> p#sayings </li></ul><ul><li>  </li></ul><ul><li>$( 'golden-delicious' ).next( '.yummy' ); </li></ul><ul><li>// -> li#mcintosh </li></ul><ul><li>  </li></ul><ul><li>$( 'golden-delicious' ).next( '.yummy' ,  1 ); </li></ul><ul><li>// -> li#ida-red </li></ul><ul><li>  </li></ul><ul><li>$( 'ida-red' ).next(); </li></ul><ul><li>// -> undefined </li></ul>
  • 67. nextSiblings :: Element <ul><li>nextSiblings(element) -> [HTMLElement...]  Collects all of element’s next siblings and returns them as an array of extended elements.   </li></ul><ul><li>Two elements are siblings if they have the same parent. So for example, the head and body elements are siblings (their parent is the html element). Next siblings are simply the ones which follow element in the document. </li></ul><ul><li>The returned array reflects the siblings order in the document (e.g. an index of 0 refers to the sibling right below element). </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 68. Examples <ul><li><ul> </li></ul><ul><li>   <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>   <li id=&quot;mutsu&quot;>Mutsu</li> </li></ul><ul><li>   <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>   <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).nextSiblings(); </li></ul><ul><li>// -> [li#mcintosh, li#ida-red] </li></ul><ul><li>  </li></ul><ul><li>$( 'ida-red' ).nextSiblings(); </li></ul><ul><li>// -> [] </li></ul>
  • 69. observe :: Element <ul><li>observe(element, eventName, handler[, useCapture = false]) -> HTMLElement  Registers an event handler on element and returns element.   </li></ul><ul><li>This is a simple proxy for Event.observe. Please refer to it for further information. </li></ul>
  • 70. Example <ul><li>$( element ).observe( 'click' ,  function (event){ </li></ul><ul><li>   alert(Event.element(event).innerHTML); </li></ul><ul><li>  }); </li></ul><ul><li>// -> HTMLElement (and will display an alert dialog containing  </li></ul><ul><li>// element's innerHTML when element is clicked). </li></ul>
  • 71. previous :: Element <ul><li>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.   </li></ul><ul><li>The previous() method is part of Prototype's ultimate DOM traversal toolkit (check out up(), down() and next() for some more Prototypish niceness). It allows precise index-based and/or CSS rule-based selection of any of element's previous siblings . (Note that two elements are considered siblings if they have the same parent, so for example, the head and body elements are siblings—their parent is the html element.) </li></ul>
  • 72. <ul><li>As it totally ignores text nodes (it only returns elements), you don’t have to worry about whitespace-only nodes. </li></ul><ul><li>And as an added bonus, all elements returned are already extended allowing chaining: </li></ul><ul><li>$(element).down(1).next('li', 2).hide(); </li></ul><ul><li>Walking the DOM has never been that easy! </li></ul>
  • 73. Arguments <ul><li>If no argument is passed, element's previous sibling is returned (this is similar as calling previousSibling except previous() returns an already extended element). </li></ul><ul><li>If an index is passed, element's corresponding previous sibling is returned. (This is equivalent to selecting an element from the array of elements returned by the method previousSiblings()). Note that the sibling right above element has an index of 0. </li></ul><ul><li>If cssRule is defined, previous() will return the element first previous sibling that matches it. </li></ul><ul><li>If both cssRule and index are defined, previous() will collect all of element's previous siblings matching the given CSS rule and will return the one specified by the index. </li></ul><ul><li>In all of the above cases, if no previous sibling is found, undefined will be returned. </li></ul>
  • 74. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;> </li></ul><ul><li>     <h3>Apples</h3> </li></ul><ul><li>     <ul id=&quot;list-of-apples&quot;> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot; class=&quot;yummy&quot;>Golden Delicious</li> </li></ul><ul><li>       <li id=&quot;mutsu&quot; class=&quot;yummy&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>     <p id=&quot;saying&quot;>An apple a day keeps the doctor away.</p>   </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul>
  • 75. <ul><li>$('saying').previous(); </li></ul><ul><li>// equivalent: </li></ul><ul><li>$('saying').previous(0); </li></ul><ul><li>// -> ul#list-of-apples </li></ul><ul><li>  </li></ul><ul><li>$('saying').previous(1); </li></ul><ul><li>// -> h3 </li></ul><ul><li>  </li></ul><ul><li>$('saying').previous('h3'); </li></ul><ul><li>// -> h3 </li></ul><ul><li>  </li></ul><ul><li>$('ida-red').previous('.yummy'); </li></ul><ul><li>// -> li#mutsu </li></ul><ul><li>  </li></ul><ul><li>$('ida-red').previous('.yummy', 1); </li></ul><ul><li>// -> li#golden-delicious </li></ul><ul><li>  </li></ul><ul><li>$('ida-red').previous(5); </li></ul><ul><li>// -> undefined </li></ul>
  • 76. previousSiblings :: Element <ul><li>previousSiblings(element) -> [HTMLElement...]  Collects all of element’s previous siblings and returns them as an array of extended elements.   </li></ul><ul><li>Two elements are siblings if they have the same parent. So for example, the head and body elements are siblings (their parent is the html element). Previous siblings are simply the ones which precede element in the document. </li></ul><ul><li>The returned array reflects the siblings inversed order in the document (e.g. an index of 0 refers to the lowest sibling i.e., the one closest to element). </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 77. Examples <ul><li><ul> </li></ul><ul><li>   <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>   <li id=&quot;mutsu&quot;>Mutsu</li> </li></ul><ul><li>   <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>   <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'mcintosh' ).previousSiblings(); </li></ul><ul><li>// -> [li#mutsu, li#golden-delicious] </li></ul><ul><li>  </li></ul><ul><li>$( 'golden-delicious' ).previousSiblings(); </li></ul><ul><li>// -> [] </li></ul>
  • 78. readAttribute :: Element <ul><li>readAttribute(element, attribute) -> String | null  Returns the value of element's attribute or null if attribute has not been specified.   </li></ul><ul><li>This method serves two purposes. First it acts as a simple wrapper around getAttribute which isn't a &quot;real&quot; function in Safari and Internet Explorer (it doesn't have .apply or .call for instance). Secondly, it cleans up the horrible mess Internet Explorer makes when handling attributes. </li></ul>
  • 79. Examples <ul><li><a id=&quot;tag&quot; href=&quot;/tags/prototype&quot; rel=&quot;tag&quot; title=&quot;view related bookmarks.&quot; my_widget=&quot;some info.&quot;>Prototype</a> </li></ul><ul><li>  </li></ul><ul><li>$( 'tag' ).readAttribute( 'href' ); </li></ul><ul><li>// -> '/tags/prototype' </li></ul><ul><li>  </li></ul><ul><li>$( 'tag' ).readAttribute( 'title' ); </li></ul><ul><li>// -> 'view related bookmarks.' </li></ul><ul><li>  </li></ul><ul><li>$( 'tag' ).readAttribute( 'my_widget' ); </li></ul><ul><li>// -> 'some info. </li></ul>
  • 80. recursivelyCollect :: Element <ul><li>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.   </li></ul><ul><li>This method is used internally by ancestors(), descendants(), nextSiblings(), previousSiblings() and siblings() which offer really convenient way to grab elements, so directly accessing recursivelyCollect() should seldom be needed. However, if you are after something out of the ordinary, it is the way to go. </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 81. Examples <ul><li><ul id=&quot;fruits&quot;> </li></ul><ul><li>   <li id=&quot;apples&quot;> </li></ul><ul><li>     <ul id=&quot;list-of-apples&quot;> </li></ul><ul><li>       <li id=&quot;golden-delicious&quot;><p>Golden Delicious</p></li> </li></ul><ul><li>       <li id=&quot;mutsu&quot;>Mutsu</li> </li></ul><ul><li>       <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>       <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>     </ul> </li></ul><ul><li>   </li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).recursivelyCollect( 'firstChild' ); </li></ul><ul><li>// -> [li#apples, ul#list-of-apples, li#golden-delicious, p] </li></ul>
  • 82. remove :: Element <ul><li>remove(element) -> HTMLElement  Completely removes element from the document and returns it.   </li></ul><ul><li>If you would rather just hide the element and keep it around for further use, try hide() instead. </li></ul>
  • 83. Examples <ul><li>// Before: </li></ul><ul><li><ul> </li></ul><ul><li>   <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>   <li id=&quot;mutsu&quot;>Mutsu</li> </li></ul><ul><li>   <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>   <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).remove(); </li></ul><ul><li>// -> HTMLElement (and removes li#mutsu) </li></ul><ul><li>  </li></ul><ul><li>// After: </li></ul><ul><li><ul> </li></ul><ul><li>   <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>   <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>   <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li></ul> </li></ul>
  • 84. removeClassName :: Element <ul><li>removeClassName(element, className) -> HTMLElement </li></ul><ul><li>Removes element’s CSS className and returns element. </li></ul>
  • 85. Examples <ul><li><div id=&quot;mutsu&quot; class=&quot;apple fruit food&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$('mutsu').removeClassName('food'); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>$('mutsu').classNames(); </li></ul><ul><li>// -> ['apple', 'fruit'] </li></ul><ul><li>  </li></ul>
  • 86. replace :: Element <ul><li>replace(element[, html]) -> HTMLElement  Replaces element by the content of the html argument and returns the removed element.   </li></ul><ul><li>html can be either plain text, an HTML snippet or any JavaScript object which has a toString() method. </li></ul><ul><li>If it contains any <script> tags, these will be evaluated after element has been replaced (replace() internally calls String.evalScripts). </li></ul><ul><li>  </li></ul><ul><li>Note that if no argument is provided, replace() will simply clear element of its content. However, using remove() to do so is both faster and more standard compliant. </li></ul>
  • 87. Examples <ul><li><div id=&quot;food&quot;> </li></ul><ul><li>   <div id=&quot;fruits&quot;> </li></ul><ul><li>     <p id=&quot;first&quot;>Kiwi, banana <em>and</em> apple.</p> </li></ul><ul><li>   </div> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>Passing an HTML snippet: </li></ul><ul><li>  </li></ul><ul><li>$('first').replace('<ul id=&quot;favorite&quot;><li>kiwi</li><li>banana</li><li>apple</li></ul>'); </li></ul><ul><li>// -> HTMLElement (p#first) </li></ul><ul><li>$('fruits').innerHTML; </li></ul><ul><li>// -> '<ul id=&quot;favorite&quot;><li>kiwi</li><li>banana</li><li>apple</li></ul>' </li></ul>
  • 88. <ul><li>Again, with a <script> tag thrown in: </li></ul><ul><li>  </li></ul><ul><li>$('favorite').replace('<p id=&quot;still-first&quot;>Melon, oranges <em>and</em> grapes.</p><script>alert(&quot;removed!&quot;)</script>'); </li></ul><ul><li>// -> HTMLElement (ul#favorite) and prints &quot;removed!&quot; in an alert dialog. </li></ul><ul><li>$('fruits').innerHTML </li></ul><ul><li>// -> '<p id=&quot;still-first&quot;>Melon, oranges <em>and</em> grapes.</p>' </li></ul><ul><li>  </li></ul><ul><li>With plain text: </li></ul><ul><li>  </li></ul><ul><li>$('still-first').replace('Melon, oranges and grapes.'); </li></ul><ul><li>// -> HTMLElement (p#still-first) </li></ul><ul><li>$('fruits').innerHTML </li></ul><ul><li>// -> 'Melon, oranges and grapes.' </li></ul><ul><li>  </li></ul><ul><li>Finally, relying on the toString() method: </li></ul><ul><li>  </li></ul><ul><li>$('fruits').update(123); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>$('food').innerHTML; </li></ul><ul><li>// -> '123' </li></ul>
  • 89. scrollTo :: Element <ul><li>scrollTo(element) -> HTMLElement  Scrolls the window so that element appears at the top of the viewport. Returns element.   </li></ul><ul><li>This has a similar effect than what would be achieved using HTML anchors (except the browser’s history is not modified). </li></ul>
  • 90. Examples <ul><li>$(element).scrollTo(); </li></ul>
  • 91. setStyle :: Element <ul><li>setStyle(element, styles) -> HTMLElement </li></ul><ul><li>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. </li></ul>
  • 92. Examples <ul><li>$( element ).setStyle({ </li></ul><ul><li>   backgroundColor:  ' #900' , </li></ul><ul><li>   fontSize:  '12px' </li></ul><ul><li>}); </li></ul><ul><li>// -> HTMLElement </li></ul>
  • 93. Notes <ul><li>The method transparently deals with browser inconsistencies for float—however, as float is a reserved keyword, you must either escape it or use cssFloat instead—and opacity—which accepts values between 0 (fully transparent) and 1 (fully opaque). You can safely use either of the following across all browsers: </li></ul><ul><li>  </li></ul><ul><li>$( element ).setStyle({ </li></ul><ul><li>   cssFloat:  'left' , </li></ul><ul><li>   opacity:  0.5 </li></ul><ul><li>}); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>$( element ).setStyle({ </li></ul><ul><li>   'float' :  'left' , // notice how float is surrounded by single quotes </li></ul><ul><li>   opacity:  0.5 </li></ul><ul><li>}); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>Not all CSS shorthand properties are supported. You may only use the CSS properties described in the Document Object Model (DOM) Level 2 Style Specification. </li></ul>
  • 94. show :: Element <ul><li>show(element) -> HTMLElement </li></ul><ul><li>Displays and returns element. </li></ul>
  • 95. Examples <ul><li><div id=&quot;error-message&quot; style=&quot;display:none;&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'error-message' ).show(); </li></ul><ul><li>// -> HTMLElement (and displays div#error-message) </li></ul>
  • 96. Notes <ul><li>show() cannot display elements hidden via CSS stylesheets. Note that this is not a Prototype limitation but a consequence of how the CSS display property works. </li></ul><ul><li>  </li></ul><ul><li><style> </li></ul><ul><li>   #hidden-by-css { </li></ul><ul><li>     display: none; </li></ul><ul><li>   } </li></ul><ul><li></style> </li></ul><ul><li>  </li></ul><ul><li>[…] </li></ul><ul><li>  </li></ul><ul><li><div id=&quot;hidden-by-css&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'hidden-by-css' ).show(); // DOES NOT WORK! </li></ul><ul><li>// -> HTMLElement (div#error-message is still hidden!) </li></ul>
  • 97. Backwards compatibility change <ul><li>In previous versions of Prototype, you could pass an arbitrary number of elements to Element.toggle, Element.show, and Element.hide, for consistency, this is no longer possible in version 1.5 ! </li></ul><ul><li>You can however achieve a similar result by using Enumerables: </li></ul><ul><li>['content', 'navigation', 'footer']. each (Element.show); </li></ul><ul><li>  </li></ul><ul><li>// -> ['content', 'navigation', 'footer']  </li></ul><ul><li>// and displays #content, #navigation and #footer. </li></ul><ul><li>  </li></ul><ul><li>or even better: </li></ul><ul><li>  </li></ul><ul><li>$('content', 'navigation', 'footer'). invoke ('show'); </li></ul><ul><li>  </li></ul><ul><li>// -> [HTMLElement, HTMLElement, HTMLElement] (#content, #navigation and #footer) </li></ul><ul><li>// and displays #content, #navigation and #footer. </li></ul>
  • 98. siblings :: Element <ul><li>siblings(element) -> [HTMLElement...]  Collects all of element’s siblings and returns them as an array of extended elements.   </li></ul><ul><li>Two elements are siblings if they have the same parent. So for example, the head and body elements are siblings (their parent is the html element). </li></ul><ul><li>The returned array reflects the siblings order in the document (e.g. an index of 0 refers to element’s topmost sibling). </li></ul><ul><li>Note that all of Prototype’s DOM traversal methods ignore text nodes and return element nodes only. </li></ul>
  • 99. Examples <ul><li><ul> </li></ul><ul><li>   <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>   <li id=&quot;mutsu&quot;>Mutsu</li> </li></ul><ul><li>   <li id=&quot;mcintosh&quot;>McIntosh</li> </li></ul><ul><li>   <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).siblings(); </li></ul><ul><li>// -> [li#golden-delicious, li#mcintosh, li#ida-red] </li></ul><ul><li>  </li></ul>
  • 100. stopObserving :: Element <ul><li>stopObserving(element, eventName, handler) -> HTMLElement  Unregisters handler and returns element.   </li></ul><ul><li>This is a simple proxy for Event.stopObserving . Please refer to it for further information. </li></ul>
  • 101. Example <ul><li>$( element ).stopObserving( 'click' , coolAction); </li></ul><ul><li>// -> HTMLElement (and unregisters the 'coolAction' event handler). </li></ul>
  • 102. toggle :: Element <ul><li>toggle(element) -> HTMLElement </li></ul><ul><li>Toggles the visibility of element. </li></ul>
  • 103. Examples <ul><li><div id=&quot;welcome-message&quot;></div> </li></ul><ul><li><div id=&quot;error-message&quot; style=&quot;display:none;&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'welcome-message' ).toggle(); </li></ul><ul><li>// -> HTMLElement (and hides div#welcome-message) </li></ul><ul><li>  </li></ul><ul><li>$( 'error-message' ).toggle(); </li></ul><ul><li>// -> HTMLElement (and displays div#error-message) </li></ul><ul><li>  </li></ul>
  • 104. Notes <ul><li>toggle() cannot display elements hidden via CSS stylesheets. Note that this is not a Prototype limitation but a consequence of how the CSS display property works. </li></ul><ul><li>  </li></ul><ul><li><style> </li></ul><ul><li>   #hidden-by-css { </li></ul><ul><li>     display: none; </li></ul><ul><li>   } </li></ul><ul><li></style> </li></ul><ul><li>  </li></ul><ul><li>[…] </li></ul><ul><li>  </li></ul><ul><li><div id=&quot;hidden-by-css&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'hidden-by-css' ).toggle(); // WONT' WORK! </li></ul><ul><li>// -> HTMLElement (div#hidden-by-css is still hidden!) </li></ul>
  • 105. Backwards compatibility change <ul><li>In previous versions of Prototype, you could pass an arbitrary number of elements to Element.toggle, Element.show, and Element.hide, for consistency, this is no longer possible in version 1.5! </li></ul><ul><li>You can however achieve a similar result by using Enumerables: </li></ul><ul><li>['error-message', 'welcome-message'].each(Element.toggle); </li></ul><ul><li>// -> ['error-message', 'welcome-message']  </li></ul><ul><li>// and toggles the visibility of div#error-message and div#confirmation-message. </li></ul><ul><li>or even better: </li></ul><ul><li>$('error-message', 'welcome-message').invoke('toggle'); </li></ul><ul><li>// -> [HTMLElement, HTMLElement] (div#error-message and div#welcome-message) </li></ul><ul><li>// and toggles  </li></ul>
  • 106. toggleClassName :: Element <ul><li>toggleClassName(element, className) -> HTMLElement </li></ul><ul><li>Toggles element’s CSS className and returns element. </li></ul>
  • 107. Examples <ul><li><div id=&quot;mutsu&quot; class=&quot;apple&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).hasClassName( 'fruit' ); </li></ul><ul><li>// -> false </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).toggleClassName( 'fruit' ); </li></ul><ul><li>// -> element </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).hasClassName( 'fruit' ); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul>
  • 108. undoClipping :: Element <ul><li>undoClipping(element) -> HTMLElement </li></ul><ul><li>Sets element’s CSS overflow property back to the value it had before makeClipping() was applied. Returns element. </li></ul>
  • 109. Example <ul><li><div id=&quot;framer&quot;> </li></ul><ul><li>   <img src=&quot;/assets/2007/1/14/chairs.jpg&quot; alt=&quot;example&quot; /> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'framer' ).undoClipping(); </li></ul><ul><li>// -> HTMLElement (and sets the CSS overflow property to its original value). </li></ul>
  • 110. undoPositioned :: Element <ul><li>undoPositioned(element) -> HTMLElement  Sets element back to the state it was before makePositioned() was applied to it. Returns element.   </li></ul><ul><li>element's absolutely positioned children will now have their positions set relatively to element's nearest ancestor with a CSS position of 'absolute', 'relative' or 'fixed'. </li></ul>
  • 111. Example <ul><li><p>lorem […]</p> </li></ul><ul><li><div id=&quot;container&quot;> </li></ul><ul><li>   <div id=&quot;element&quot; style=&quot;position: absolute; top: 20px; left: 20px;&quot;></div> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'container' ).makePositioned(); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>  </li></ul>
  • 112. up :: Element <ul><li>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.   </li></ul><ul><li>The up() method is part of Prototype’s ultimate DOM traversal toolkit (check out down(), next() and previous() for some more Prototypish niceness). It allows precise index-based and/or CSS rule-based selection of any of element’s ancestors. </li></ul><ul><li>As it totally ignores text nodes (it only returns elements), you don’t have to worry about whitespace-only nodes. </li></ul><ul><li>And as an added bonus, all elements returned are already extended allowing chaining: </li></ul><ul><li>$(element).down(1).next('li', 2).hide(); </li></ul><ul><li>Walking the DOM has never been that easy! </li></ul>
  • 113. Arguments <ul><li>If no argument is passed, element’s first ancestor is returned (this is similar as calling parentNode except up() returns an already extended element. </li></ul><ul><li>If an index is passed, element’s corresponding ancestor is is returned. (This is equivalent to selecting an element from the array of elements returned by the method ancestors()). Note that the first element has an index of 0. </li></ul><ul><li>If cssRule is defined, up() will return the first ancestor that matches it. </li></ul><ul><li>If both cssRule and index are defined, up() will collect all the ancestors matching the given CSS rule and will return the one specified by the index. </li></ul><ul><li>In all of the above cases, if no descendant is found, undefined will be returned. </li></ul>
  • 114. Examples <ul><li><html> </li></ul><ul><li>   […] </li></ul><ul><li>   <body> </li></ul><ul><li>     <ul id=&quot;fruits&quot;> </li></ul><ul><li>       <li id=&quot;apples&quot; class=&quot;keeps-the-doctor-away&quot;> </li></ul><ul><li>         <ul> </li></ul><ul><li>           <li id=&quot;golden-delicious&quot;>Golden Delicious</li> </li></ul><ul><li>           <li id=&quot;mutsu&quot; class=&quot;yummy&quot;>Mutsu</li> </li></ul><ul><li>           <li id=&quot;mcintosh&quot; class=&quot;yummy&quot;>McIntosh</li> </li></ul><ul><li>           <li id=&quot;ida-red&quot;>Ida Red</li> </li></ul><ul><li>         </ul> </li></ul><ul><li>       </li> </li></ul><ul><li>     </ul> </li></ul><ul><li>   </body> </li></ul><ul><li></html> </li></ul>
  • 115. <ul><li>$( 'fruits' ).up(); </li></ul><ul><li>// equivalent: </li></ul><ul><li>$( 'fruits' ).up( 0 ); </li></ul><ul><li>// -> body </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).up( 2 ); </li></ul><ul><li>// -> ul#fruits </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).up( 'li' ); </li></ul><ul><li>// -> li#apples </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).up( '.keeps-the-doctor-away' ); </li></ul><ul><li>// -> li#apples </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).up( 'ul' ,  1 ); </li></ul><ul><li>// -> li#fruits </li></ul><ul><li>  </li></ul><ul><li>$( 'mutsu' ).up( 'div' ); </li></ul><ul><li>// -> undefined </li></ul>
  • 116. update :: Element <ul><li>update(element[, newContent]) -> HTMLElement  Replaces the content of element with the provided newContent argument and returns element.   </li></ul><ul><li>newContent can be plain text, an HTML snippet, or any JavaScript object which has a toString() method. </li></ul><ul><li>If it contains any <script> tags, these will be evaluated after element has been updated (update() internally calls String.evalScripts()). </li></ul><ul><li>If no argument is provided, update() will simply clear element of its content. </li></ul><ul><li>Note that this method allows seamless content update of table related elements in Internet Explorer 6 and beyond </li></ul>
  • 117. Examples <ul><li><div id=&quot;fruits&quot;>carrot, eggplant and cucumber</div> </li></ul><ul><li>  </li></ul><ul><li>Passing a regular string: </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).update( 'kiwi, banana and apple' ); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>$( 'fruits' ).innerHTML </li></ul><ul><li>// -> 'kiwi, banana and apple' </li></ul><ul><li>  </li></ul><ul><li>Clearing the element’s content: </li></ul><ul><li>  </li></ul><ul><li>$( 'fruits' ).update(); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>$( 'fruits' ).innerHTML; </li></ul><ul><li>// -> '' (an empty string) </li></ul>
  • 118. <ul><li>And now inserting an HTML snippet: </li></ul><ul><li>  </li></ul><ul><li>$('fruits').update('<p>Kiwi, banana <em>and</em> apple.</p>'); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>$('fruits').innerHTML; </li></ul><ul><li>// -> '<p>Kiwi, banana <em>and</em> apple.</p>' </li></ul><ul><li>  </li></ul><ul><li>… with a <script> tag thrown in: </li></ul><ul><li>  </li></ul><ul><li>$('fruits').update('<p>Kiwi, banana <em>and</em> apple.</p><script>alert(&quot;updated!&quot;)</script>'); </li></ul><ul><li>// -> HTMLElement (and prints &quot;updated!&quot; in an alert dialog). </li></ul><ul><li>$('fruits').innerHTML; </li></ul><ul><li>// -> '<p>Kiwi, banana <em>and</em> apple.</p>' </li></ul><ul><li>  </li></ul><ul><li>Relying on the toString() method: </li></ul><ul><li>  </li></ul><ul><li>$('fruits').update(123); </li></ul><ul><li>// -> HTMLElement </li></ul><ul><li>$('fruits').innerHTML; </li></ul><ul><li>// -> '123' </li></ul>
  • 119. <ul><li>Finally, you can do some pretty funky stuff by defining your own toString() method on your custom objects: </li></ul><ul><li>  </li></ul><ul><li>var Fruit = Class.create(); </li></ul><ul><li>Fruit.prototype = { </li></ul><ul><li>   initialize: function(fruit){ </li></ul><ul><li>     this.fruit = fruit; </li></ul><ul><li>   }, </li></ul><ul><li>   toString: function(){ </li></ul><ul><li>     return 'I am a fruit and my name is &quot;' + this.fruit + '&quot;.';  </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul><ul><li>var apple = new Fruit('apple'); </li></ul><ul><li>  </li></ul><ul><li>$('fruits').update(apple); </li></ul><ul><li>$('fruits').innerHTML; </li></ul><ul><li>// -> 'I am a fruit and my name is &quot;apple&quot;.' </li></ul><ul><li>  </li></ul>
  • 120. visible :: Element <ul><li>visible(element) -> Boolean </li></ul><ul><li>Returns a Boolean indicating whether or not element is visible (i.e. whether its inline style property is set to &quot;display: none;&quot;). </li></ul>
  • 121. Examples <ul><li><div id=&quot;visible&quot;></div> </li></ul><ul><li><div id=&quot;hidden&quot; style=&quot;display: none;&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$( 'visible' ).visible(); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul><ul><li>$( 'hidden' ).visible(); </li></ul><ul><li>// -> false </li></ul>
  • 122. Notes <ul><li>Styles applied via a CSS stylesheet are not taken into consideration. Note that this is not a Prototype limitation, it is a CSS limitation. </li></ul><ul><li>  </li></ul><ul><li><style> </li></ul><ul><li>   #hidden-by-css { </li></ul><ul><li>     display: none; </li></ul><ul><li>   } </li></ul><ul><li></style> </li></ul><ul><li>  </li></ul><ul><li>[…] </li></ul><ul><li>  </li></ul><ul><li><div id=&quot;hidden-by-css&quot;></div> </li></ul><ul><li>  </li></ul><ul><li>$('hidden-by-css').visible(); </li></ul><ul><li>// -> true </li></ul>
  • 123. Element.Methods.Simulated <ul><li>Element.Methods.Simulated allows simulating missing HTMLElement methods in non standard compliant browsers which you can then call on extended elements just as if the browser vendor had suddenly decided to implement them. </li></ul><ul><li>hasAttribute </li></ul><ul><li>hasAttribute(element, attribute) -> Boolean </li></ul><ul><li>Simulates the standard compliant DOM method hasAttribute for browsers missing it (Internet Explorer 6 and 7). </li></ul>
  • 124. hasAttribute :: Element <ul><li>hasAttribute(element, attribute) -> Boolean  Simulates the standard compliant DOM method hasAttribute for browsers missing it (Internet Explorer 6 and 7).   </li></ul><ul><li>Example </li></ul><ul><li>  </li></ul><ul><li><a id=&quot;link&quot; href=&quot;http://prototypejs.org&quot;>Prototype</a> </li></ul><ul><li>  </li></ul><ul><li>$('link').hasAttribute('href'); </li></ul><ul><li>// -> true </li></ul><ul><li>  </li></ul>
  • 125. info :: Element.Methods <ul><li>Element.Methods is a mixin for DOM elements. </li></ul><ul><li>The methods of this object are accessed through the $() utility or through the Element object and shouldn’t be accessed directly. </li></ul>

×