Eight Weeks of Prototype: Week 2, How Prototype Extends Elements

Introduction

In the first article of this series ("Week 1, Beginning with Prototype") I showed you different methods for accessing elements in the DOM, as well as how to create new elements. Whenever you select (or create) elements, each element is automatically extended with extra functionality by Prototype. Essentially, this is a number of methods that help you manipulate the behaviour of the element more easily.

In this article I will show you a selection of the most useful methods, including various examples of using (and combining) these methods. While the methods covered here are not exhaustive, you can find documentation about the rest of these at http://prototypejs.org/api/element/methods.

In actual fact, we've already seen some of these methods in the first article. Namely, we have already looked the following methods:

• update() – Used to update the inner HTML of the target element. We will look at some more examples of this method shortly.
• select(), up(), down(), previous() and next() – Used to other elements in the DOM relative to the target element.
• insert() – Used to add a new element to the DOM relative to the target element.
• remove() – Used to remove the target element (and its children) from the DOM.
• hide() and show() – Only mentioned in passing so far, these are used to hide an element from the view of the user and to show it again. I will show you some examples of using these methods.

Firstly, I will show you more about how the update() method works, used to modify the content of an element. I will also show you how to then read that content. Additionally, you will learn how to read and write element attributes using JavaScript.

Next, I will show you how to manage the CSS classes of elements, as well as how to manipulate the styles of elements in real-time. Prototype also makes it easy to determine the width and height of elements, which I will also show you.

Following this, you will learn how to show and hide elements in the user's display. I will show you some practical examples of where it is useful to do so.

• Next: Reading and Writing an Element's Content