Scripting For The 6.0 Browsers
Revised January 27, 2002 | Printer-friendly version
Last Lesson | Next Lesson | Top
Part 1: New Pieces Of The Puzzle
The best way to think of the DOM is as a huge tree, with a trunk that represents the document, and many branches representing the different elements on the page. Every part of the tree is called a node. Nodes can be tags, like HTML or XML, or attributes of tags, like "align=left" or "size=3." Nodes can also be strings of text within the document, like the ones you're reading now.
A node can be a part of another larger node, called the parent of that node. A node can also be a parent itself to any number of child nodes within it. For example, the document is a node. If the document contains images, the document is the parent of the image nodes, which in turn are its children. The images are parents themselves to their attribute child nodes. Just like the tree is the parent to the branch is the parent of the leaf, so is the Document Object Model.
Whew, got that?
In the 4.0 browsers, we were limited in the number of nodes we could manipulate with JavaScript. With full DOM-support applications like Netscape 6 and Mozilla, nearly every element -- every node -- is available to us. How we are able to access them depends primarily on the ID attribute of the element. Let's look at two important DOM methods that allow us to do this.
getElementById()
If you know an element's ID, you can directly access it with the new DOM document method getElementById(). Simply pass the element's ID to the method as an argument and it returns a reference to that element:
<div id="myElement"></div>
To retrive this element in JavaScript, we would use:
x = document.getElementById("myElement")
x now becomes a reference to the <div> element. From here we can use x to manipulate the <div> tag, as we'll see shortly.
getElementsByTagName()
Another way to retrieve elements is to use getElementsByTagName(). This method takes the tag type as its argument and returns a collection (or array) of all of the elements of that type in the document.
For example, if you wanted to collect all of the images in a document, you could do this:
x = document.getElementsByTagName("img")
x now becomes a collection of references to the <IMG> elements in the document. To access a particular element in the collection, say the first image, we would refer to it by its ordinal number, or position in the collection:
x = document.getElementsByTagName("img")
firstImage = x.item(0)
getElementsByTagName() collects every matching element in the document whether it has an ID assigned or not, which makes it very useful for grabbing tags you normally wouldn't assign IDs to, like <P> and <TD>.
getElementById() and getElementsByTagName() are powerful ways of traversing the DOM tree without having to script our way out to the farthest branches. Rather than using document.something.somethingElse to reach an element, you can retrieve it directly, or elements like it, with these two methods.