Prototype Element Methods More Convenient

Share this article

Since we so recently published Dan Webb’s article on the Prototype library, it makes sense to continue tracking the evolution of the library here in this blog.

In the Prototype library, the Element object (documentation) provides a bunch of methods that operate on a specified element in the document. Here’s the list of the most notable methods from the article:

var element = $('someId');

// Hides an element
// Shows an element
// Adds a CSS class to the element
Element.addClassName(element, "cssClassName")
// Removes a CSS class from the element
Element.removeClassName(element, "cssClassName")
// Returns true if element has the CSS class
Element.hasClassName(element, "cssClassName")
// Returns {width: 123, height: 45}
// replaces the innerHTML of element with newHtml
Element.update(element, newHtml)

For a library designed to reduce the pain of writing JavaScript, this stuff was actually fairly verbose. But designer/developer JasonJustin Palmer has the scoop on some changes that are in the pipeline. Before long, you’ll be able to write the above method calls like this instead:

var element = $('someId');


Prototype’s handy $ function, which can fetch any element given its ID, will now enhance that element with the methods of the Element object before returning it to you. The same goes for the $$ and getElementsByClassName methods provided by Prototype.

The catch at this stage is that element references obtained by other means (i.e. through standard DOM collections/methods) will not be enhanced in this way, so you’ll have to be aware of which element references were generated by Prototype and which are standard DOM references — a significant break from tradition for Prototype. In fact, even some element references returned by Prototype methods (e.g. Form.getElements) at this stage will still return “vanilla” DOM element references without the enhancements above.

Developers who aren’t keen on these inconsistencies may want to stick to the more verbose original syntax, but there are significant savings in typing for those developers who make heavy use of Prototype’s enhanced element fetching functions. For example:


This new functionality will make its debut in the upcoming release of Prototype 1.5. In the meantime, you can grab the latest work-in-progress version from Rails to try it out.

Kevin YankKevin Yank
View Author

Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form