To become proficient in DHTML, you must familiarize yourself with what's called the DOM or Document Object Model. DOM is simply a framework containing objects displayed by a browser, such as forms, images, layers, etc. Developers can employ this hierarchical structure to access and manipulate what appears onscreen.

Let's look at a simple example anyone familiar with JavaScript can relate to: how to access an input box:

document.formName.inputName where formName would be the name of our form and inputName would be the name of our input box

OR

document.formName.elements[i] where formName would be the name of the form and i would be the element number in that form you want to access.

OR

document.forms[i].inputName where i would be the number form you want to access in the document, and inputName would be the name of the input box you want to access.

In this form, we had to access the input box's parent (the form) before accessing that input layer, and we use the dot-structure ( . ) to do this since JavaScript is an object-based language.

Access a form

Let's go ahead and practice this. Here's our form code (and the form):

<form name="myForm">
<input type="text" name="textBox1">
</form>

Now, let's access this input box object a number of ways, and then we can alert() this input box and see what it comes up with.

document.forms[0].textBox1 document.forms[0].elements[0] document.myForm.textBox1 document.myForm.elements[0]

Note that by doing this, we are accessing a series of objects. First, we are accessing the window object (whose reference can be left out). Then, we access the document object. Next, the myForm object that we created, and lastly, we access the textBox1 element we created. Let's take a look at a diagram of the hierarchal structure we accessed the form object, textBox1, with.

Once we have access to the textBox1 object, we can access properties of it, including the infamous value property.

Access an image

Similarly, we can access images with references like:

document.images[i] or document.images[imageName] or document.imageName

DOM, Document Object Model, has been very browser-inconsistent, with Microsoft employing a somewhat different version of it from Netscape. This is one reason why the W3C (World Wide Web Consortium) set out to standardize the way objects are accessed on the page. So, when I say W3C DOM, this is basically the future, standard way to access everything on the page. To access elements in the newer browsers, we'll have to use this "future DOM", but for the most part, we'll cover W3C DOM much later in this tutorial.

Accessing simple elements, like an image or a form element, is familiar and fairly straightforward. But before you become complacent, let's try accessing a layer.

Next -->