JavaScript 101: The JavaScript Object Model

  • Article

If you talk to several different Web developers, each will probably see the JavaScript object model differently. To make it easiest, I'm going to split the JavaScript object model into two separate entities. One is the DOM, or Document Object Model, and the other is "everything else."

The DOM

Let's first start with the DOM. The DOM, also sometimes called the DHTML object model, is generally used to create dynamic HTML (DHTML). The DOM is made up of objects and members (by "members" I mean methods, properties, and events) that allow you to change the appearance of a Web page by using code. A drop-down menu is an example of using scripting with the DOM to manipulate the visible state of a DIV element. The following image shows the core objects in the DOM.

Periodically, I'll refer back to this image as I break down the different objects of the DOM. For now, just notice the hierarchical structure of the DOM.

Different browsers implement the DOM differently. For example, an object that you can access in one browser may not be available in another browser. The above diagram includes only core objects and not custom objects that are included only in one or a few browsers. For example, the Layer object only works in Netscape Navigator, and possibly Mozilla and Firefox by association, and not in Internet Explorer. By the same token, Internet Explorer may implement its own custom objects that are unavailable in non-Microsoft browsers. For this reason, if you want your scripts to run in all possible browsers, you should stick with the core objects and not use custom objects, which may make programming scripts easier but will cause problems for your users.

Scripting against objects or using methods, properties or events that are not implemented in all browsers causes a run-time scripting error, like the one shown in the following image, when displaying a page in a browser in which the object or member is not available.

You have probably seen similar error messages. Sometimes, the cause is that there is an error in the code, but most often, the programmer scripted against an object or member that isn't available in your browser.

Everything Else

Next, the "everything else" that I mentioned. Everything else includes objects to handle strings, numbers, and boolean values as well as mathematical functions and arrays. I generally consider these less "objects" and more as language conventions and built-in functions, but I'll explain that a bit later. For now, I'd like to focus on working with the DOM since those are the objects that most client-side JavaScript uses (although you can use the math functions to calculate numbers, which you might get from a Web form, but that's a subject that deserves its own post, so for now forget I mentioned it).

Working with the DOM

As I already said, the objects in the DOM are the objects that you would generally use to animate Web pages using client-side scripting. The main top-level object is the window object. All other objects are what are called "child" objects of this object because they exist as "children" of this object. This can be easier to understand if you think of the above diagram like a family tree. The window is the top-level "parent" object with "child" objects named document, event, history, location, navigator, and screen. The document object is a "child" object that is also a "parent" object because it has "child" objects, as does the form object.

The relationship between parent and child objects in an object model give the objects a structure that you can easily navigate, and understanding this structure helps you determine how to access child objects, which makes editing and writing scripts easier. You can work with most child objects of the window object directly without accessing them from the window object.

When you access individual objects within this hierarchical structure, you need to separate each object (and/or member) with a period (.). For example, the following code accesses the BODY element of the document object that is a child of the window object.

 window.document.body

However, as I mentioned above, the document object is one of the child objects of the window object that you can access without first accessing the window object. So this code could also be written as shown in the following code.

 document.body

Note You may have noticed that there isn't a body object in the object hierarchy shown in the image. This is correct. You'll also notice that I said that the code accesses the BODY "element" not the body object. The body in the above code is an accessor property that returns an element object. (If you've forgotten what an accessor property is, see my previous post JavaScript and OOP.)

All HTML elements (with the exception of the elements that have specific objects in the object model, like the STYLE and FORM elements) use the element object. However, not all elements have properties that you can use to access them directly. (In fact, most do not.) The BODY element just happens to be one of the few that does. I'll explain in a future post how to access all the other elements.

Whew! This was a lot of general, overview-type stuff to take in in one sitting, and you might be thinking what on earth you're going to do with all of it. Well, I don't expect it to gel completely just yet, but soon it will all make sense and you'll be writing your own scripts like a pro.

For now, here's what you learned today about JavaScript:

  • JavaScript has objects that you can use to animate Web pages (DOM) as well as objects that you can use to calculate numbers, handle strings, and work with arrays ("everything else").
  • The DOM contains objects that you can use to access features in a browser and elements in a Web page.
  • You use the DOM objects to create dynamic HTML pages.
  • The DOM has a hierarchical structure that is similar to a family tree and is made up of "parent" and "child" objects.
  • Understanding the hierarchical structure of the DOM helps you know how to access the appropriate child objects and makes writing scripts easier.
  • In script, you need to separate objects in the hierarchical structure with a period (.).

In my next post, we'll write a few simple scripts and I'll show you how IntelliSense in FrontPage can help you write your scripts.