Uncle Jim's Web Designs and Tutorials

This is part four of a series on Dynamic HTML


Accessing elements

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.

Accessing 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>

Here is the result:

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.

Here is the result

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.

Accessing 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.

You should already be familiar with accessing simple elements, like an image or a form element. Now, let's try accessing a layer.

Next, we discuss accessing layers