How Prototype extends the DOM
$() function: for instance, you can write
The Element.extend method
Most of the DOM methods are encapsulated by the
Element.Methods object and
then copied over to the
Element object (for convenience). They all receive the
element to operate with as the first parameter:
These examples are concise and readable, but we can do better. If you have an
element to work with, you can pass it through
Element.extend() and it will
copy all those methods directly to the element. Example, to create an element
and manipulate it:
Our method calls just got shorter and more intuitive! As mentioned before,
Element.extend() copies all the methods from
Element.Methods to our element
which automatically becomes the first argument for all those functions. The
extend() method is smart enough not to try to operate twice on the same
element. What’s even better, the dollar function
$() extends every element
passed through it with this mechanism.
Element.extend() also applies
Form.Methods to FORM elements
Form.Element.Methods to INPUT, TEXTAREA and SELECT elements:
Note that not only the dollar function automatically extends elements!
Element.extend() is also called in
Form.getElements, on elements returned from the
$$() function (elements
matching a CSS selector) and other places - in the end, chances are you will
rarely need to explicitly call
Element.extend() at all.
Adding your own methods with Element.addMethods
If you have some DOM methods of your own that you’d like to add to those of
Prototype, no problem! Prototype provides a mechanism for this, too. Suppose
you have a bunch of functions encapsulated in an object, just pass the object
The only thing to watch out here is to make sure the first argument of these methods is the element itself. In your methods, you can also return the element in the end to allow for chainability (or, as practiced in the example, any method which itself returns the element).
There is a secret behind all this.
In browsers that support adding methods to prototype of native objects such as
HTMLElement all DOM extensions on the element are available by
default without ever having to call
Element.extend(), dollar function or
anything! This will then work in those browsers:
Because the prototype of the native browser object is extended, all DOM elements
have Prototype extension methods built-in. This, however, isn’t true for IE
which doesn’t let anyone touch
HTMLElement.prototype. To make the previous
example work in IE you would have to extend the element with
Don’t worry, the method is smart enough not to extend an element more than once.
Because of browsers that don’t support this you must take care to use DOM
extensions only on elements that have been extended. For instance, the example
above works in Firefox and Opera, but add
creating the element to make the script really solid. You can use the dollar
function as a shortcut like in the following example:
Don’t forget about this! Always test in all the browsers you plan to support.