Ajax on Rails

DOM Manipulation

In this section, we’ll examine Prototype’s classes and methods for manipulating the page elements.

$()

The dollar function ($()) is a specialized wrapper to the standard document.getElementById() DOM method. Like that method, $() returns the element with the given ID.

But unlike getElementById(), you can pass more than one argument and $() will return an array with all the requested elements. And if an argument is anything other than a string, it will be passed through directly. As a result, you can safely call $() on a value multiple times. Whether the value is a string or already a DOM element, the output will be the same. For example:

// <p id="one">One</p>
// <p id="two">Two</p>

$('one').toString();
// => '[object HTMLParagraphElement]'

$('one','two').toString();
// => [object P],[object P]

$($('one')).toString();
// => [object HTMLParagraphElement]

$F()

$F( element ) returns the value of any field input control, like a text box or a drop-down list. element can be either the ID string or the element object itself.

// <input type="text" id="userName" value="Joe Doe">
// <select id="state">
//   <option value="NY">New York</option>
//   <option value="CA" selected="selected">California</option>
// </select>

$F('userName');
// => "Joe Doe"

$F('state');
// => "CA"

Selectors

The Selector class (and its accompanying $$() method) allows you to reference page elements by their CSS selectors—that is, using the same syntax that you would to identify elements in a CSS file.