PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

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

This article is part of the series “Eight Weeks of Prototype”. Eight Weeks of Prototype is a series of articles covering the most important aspects of JavaScript development with the Prototype framework. Prototype is a JavaScript framework used to help developers easily create powerful web applications that work across all modern web browsers.. Read more about Eight Weeks of Prototype...

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.

In This Article