O'Reilly logo

Ajax on Rails by Scott Raymond

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required