Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

Select your course... Course Outlines     Advanced Flash     Advanced JavaScript and CSS     CSS     Dreamweaver     Dynamic HTML     Flash     JavaScript     Photoshop     XHTML

Select your theme... Canada-ehHalloween_JheryllChristmas_JheryllPrintBeach_StevePresentationHalloween_KhalWol_Tad

DHTML

JavaScript - An Introduction

The Document Object Model (DOM)

You will be seeing the DOM mentioned quite a bit throughout this course. The DOM is very central to all this JavaScript stuff. Understanding what the DOM is all about is very important for both JavaScript and CSS. We are going to talk about it in this section of the course because it is very important to know what the DOM is and how it works before we can jump headlong into the JavaScript tutorial.

What is a DOM?

The technical description of a DOM is actually pretty complicated. We won't go into too much technical detail, but if you like, there are many pages on the Web that talk in more detail about DOM specifications. For our purposes, at this point, we just need to know how and why it works.

In the simplest of terms, a Document Object Model is an interface that allows you to locate and manipulate different objects in a document (Web page) that are organized in a hierarchal structure.

For example, the current browser window is referred to (appropriately) as window. Inside this window is a Web document. In order to refer to the Web document, we would use a dot syntax (similar to a newsgroup structure):

window.document

By using the DOM, you can locate any object. You can think of this as similar to an address. If you were to write out an address in this way, it would look like this:

Canada.Manitoba.Winnipeg.Home_street.Joe

So the start of the address is the country (Canada) and working from left to right, you get more specific, until you get to Joe himself. If you wanted to locate Joe's wife Betty, the address would look almost identical, but slightly different:

Canada.Manitoba.Winnipeg.Home_street.Betty

The DOM works in much the same way. Just as the above address started with the country, the below examples start with the actual browser window. Inside the window is a document. Inside this document, you could have forms, images, or any number of elements. Therefore, to access these objects, you could do it like this:

window.document.form
or
window.document.image

Similarly, if you want to access an object that is part of another object, like a form's button, you could do it like this:

window.document.form.button

Note: This code is for illustrative purposes, it won't do anything if you try to type it into a document.

Structure of the DOM

The structure of the DOM is best illustrated with a chart:

As you can see from this (very simplified) illustration, the DOM is has an upside-down tree structure. Each object, such as the document object, has a parent branch, or object, and some of them have child objects. (in the case of the document object) Therefore, by looking at this chart, you can see that you would not be able to go from the history object to the forms object, as the forms object is part of the document object, not history.

For the most part you won't be using the window part of the DOM unless you have to. Most of the time, you can drop the window object from the DOM, and just use document. What this means is that instead of having to write out:

window.document.some_object

you can shorten it to:

document.some_object

The Past: Different DOMs

To make this whole issue of the DOM just a little more complicated, we should mention that at one time, there were different types of DOMs. In the past, both Microsoft and Netscape had their own proprietary DOMs for their browsers (Netscape 4, Internet Explorer 4). Although they were very similar, there were many parts that were unique to each one. This is partially why some DHTML techniques wouldn't work the same way on different browsers.

The W3C to the Rescue - A Standard DOM

In an attempt to make life easier for everyone, the W3C (World Wide Web Consortium) created a single, standardized DOM. The really good news is that every major browser has now adopted this standard DOM. This DOM will work very much the same way in any modern browser that was not created in the 90's.

This lecture's purpose is just to get you acquainted with the DOM, but later on in this course, we will talk in greater detail about the it.

The Document Object Model (DOM) Summary

The Document Object Model (DOM) Summary

• The DOM is what allows you to locate and manipulate any object in a Web page.
• The DOM uses a hierarchal "upside down tree" structure.
• Prior to Netscape version 6, and IE version 5, these two browsers used different DOMs.
• All current popular browsers use the standardized W3C DOM.

---

DHTML - TOC - Introduction - Books -
JavaScript - An Introduction - Links - Questions -
1 - [ 2 ] - 3 - 4 - 5 -

DHTML - TOC - Introduction - Books -
JavaScript - An Introduction - Links - Questions -
1 - [ 2 ] - 3 - 4 - 5 -