DOM works by creating objects. These objects have child objects and properties, and the child objects have child objects and properties, and so on. Objects are referenced either by moving down the object hierarchy, or by explicitly giving an HTML element an ID attribute (<img src="foo.gif" ID="blueMarble">).
Here is a brief listing of top-level objects:
- window
- location
- frames
- history
- navigator
- event
- screen
- document
- links
- anchors
- images
- filters
- forms
- applets
- embeds
- plug-ins
- frames
- scripts
- all
- selection
- stylesheets
- body
I'm serious: That was brief. It's vast. Though, for the most part, when doing operations like flying in a news headline title, you would reference the item in one of two ways: either starting at the document object and traversing down ordinally, or by using the ID or NAME of the element and referencing it that way. If you wanted to change the 23rd element on the page to a lovely blue, you could do it like this:
document.all(23).style.color = 'blue';
Or, if you knew that the name of the element in question was "Freddie," you could go down the tree and call it:
Or you could just skip the tree entirely in this case:
Freddie.style.color = 'blue';
The astute reader will notice that whatever HTML object I was referring to had a child object "style." This object occurs in any element that can be styled with CSS, so a <div> would have one, but a <title> would not. Below the style object are the representations of all the CSS attributes, including CSS positioning elements. So, much of the time I've spent making a headline fly in has been spent manipulating an object's style attribute.
This article was meant as an overview (a brief, brief one). The Document Object Model is vast, and there are lots of issues about how things work, and also lots of interesting things you can do with it. I'll be covering those in a later article. To read the preliminary specs the W3C is drafting, check out the working group's page on the subject. And then of course there is Microsoft's Software Development Kit (SDK) for Internet Explorer, which contains a full listing of the current SDK for prerelease two.
