Objects and Properties
Now that we know how to do stuff, we need a canvas onto which to mess about. Here we'll take a closer look on the DOM, and learn how to get control of all the objects on our pages.
This page was last updated on 2012-08-21
There have actually been a number of different DOMs over the ages. The DOM's troubled history plays out thusly: There is a Level 0 DOM, which came in with Netscape 2 (the first JS-supporting browser). This DOM is supported by all browsers. It first allowed access to images and form fields, and has since had its scope broadened to contain other elements. By and large, this is the model we use to write basic scripts.
During the height of the browser wars when the version 4 browsers appeared, Netscape and Microsoft, having no interest in working together to design a standard model, came up with two new completely incompatible DOMs. This caused enormous confusion and threatened to make DHTML prohibitively difficult to get working across browsers.
Finally, and more recently, the » W3C standardised the model, giving birth to the » DOM Level 1. This model is supported by both Netscape 6 and IE 5+. Netscape dropped support for their version 4 DOM in the interests of ploughing ahead with their fully standards-compliant browser, while Microsoft opted to continue support for theirs to preserve the functionality of the existing scripts written for it.
These three models are discussed in-depth in advanced DOMs. For now, learn about the Level 0 DOM, which is still relevant despite these new developments.
The Object Hierarchy
We've already gone through how the window holds the document, which holds the individual elements of a page. It's easier to think of this with the aid of a diagram depicting a simple page:
This is an illustration of how the document object model works. In the most primitive browsers these are the only elements you can access, but nowadays you can get to almost any HTML element. An object nesting is denoted by a dot between them, so we have things like
document.form.field. Remember, the
window level of nesting can usually be omitted unless you've created more than one.
When the document is fully loaded, your browser creates arrays for the images, forms, links and anchors (and the rest). It then places all the objects of each type into these arrays, indexed as they appear in the source code. So, the reference to the first image to appear on the page will be
document.images, and the third form will be
document.forms. Remember, remember, remember, the first index in an array is zero.
You can also give textual references to each element using the
name attribute. If you have
<img src="cat.gif" name="cat1"> in your code, you can get access to this object with
document.images["cat1"], which makes things a little easier. Remember the quotes around the name.
In recent browsers, you can leave out the array notation entirely and refer to it as
Each entry in the
forms array has another array inside it,
elements, with each index being the fields and buttons that make the form up. So, you have an extra level of nested objects. Using the diagram above with a form named
form and a field named
field, to get access to the first field, you write
document.form.field. All three methods are equivalent. You can even mix and match, should it take your fancy.
It's almost needless to say, but the order you put the objects in is important. The nesting should always go downwards, from the document down the hierarchy to the element you're referring to.
You've already seen the
write() method of the
document object — we've been using it since the start. All method names follow the form
method(), with the parentheses holding the method's arguments, or parameters. In
write()'s case, we give it a string as an argument, and it's this string that the method prints out onto the page.
Two common properties are form fields'
value and images'
src. To get or set the string of text that is in a text input box, we reference it as so:
You can then set this by setting it equal to a quoted string, or you can set it to a variable or print it out. You should know how to do all of that by now. Here's a practical example:
The simple code behind that is
<input type="text" value="First the value is this...">
<button onClick="document.inputform.elements.value='Then it is this!'; return false;">Click to change</button>
src property is the crucial property behind those oh-so-popular rollover effects. You access them just as you'd expect — something like
Read our review.