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
DOM Revisited
The Document Object Model was introduced in basic JavaScript, but we're going to get more in-depth with it this time. To recap briefly, the DOM is a description of how the objects that make up a page are connected together to form a whole. Using it, we can gain access to each object's properties and methods and change them.
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 window.document.image and document.form.field. Remember, the window level of nesting can usually be omitted unless you've created more than one.
Accessing Objects
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[0], and the third form will be document.forms[2]. 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 document.cat1.
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.forms[0].elements[0] or document.forms["form"].elements["field"] or 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.
Common Methods/Properties
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:
document.myform.myfield.value
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
<form name="inputform">
<input type="text" value="First the value is this...">
<button onClick="document.inputform.elements[0].value='Then it is this!'; return false;">Click to change</button>
</form>
The ever-important src property is the crucial property behind those oh-so-popular rollover effects. You access them just as you'd expect — something like document.images[3].src.
