Categories:

Introduction to the DOM of IE/ Firefox

This tutorial is written by Timothy Francis Brady, with revisions by JavaScriptKit.com You can visit Timothy's homepage here.

If you're a JavaScript programmer, the chances are, you've heard of something called the DOM. However, just what exactly is it? How do you program using it? As both IE and Firefox move toward conforming to the W3C proposed standards in terms of scripting and manipulating the document, the DOM takes center stage in all of us. The following is an introductory, crash course on the DOM of modern browsers such as IE and Firefox. Read it, and if nothing else, fear the DOM no more.

What is the DOM?

DOM stands for Document Object Model, and allows programmers generic access - adding, deleting, and manipulating - of all styles, attributes, and elements in a document. It can be accessed via any language available in the browser, including Java, JavaScript/ECMAScript/JScript, and VBScript (MSIE only). For practicality's sake, the syntax used in this tutorial will be that of JavaScript. The DOM is supported most completely starting in IE 5 and Gecko (NS6 and upwards, such as Firefox.)

Every tag, attribute, style, and piece of text is available to be accessed and manipulated via the DOM -- the possibilities are endless. This tutorial will cover the basics of the DOM: adding and removing tags, attributes and styles, animating existing elements, and hiding/ showing elements on a page. Obviously, to cover the entire scope of all that the DOM has to offer, an entire book is needed. This tutorial simply serves as an introduction to the subject. Just so you know.

The DOM is constantly being revised by the W3C, with browsers at the same time constantly trying to support the latest recommended version of the DOM. As of IE6 and Firefox 1.0, DOM 2 best encompasses what the two browsers currently support. DOM 3 is the next major version in the works.

Before you get started, you need to know a few terms that we will use:

  • Node: A reference to an element, its attributes, or text from the document.
  • Element: A representation of a <TAG>.
  • Attribute: A property of an element. HREF is an attribute of <A>, for example.

With that said, lets discuss browser compatibility now.

The DOM and browser compatibility

IE5 and Netscape 6 can be considered the first two browsers to begin supporting the modern DOM, or DOM level 2. More modern browsers that followed such as Firefox offer more complete support for DOM 2 (though not 100%). Luckily we don't really have to know exactly the browser versions that support DOM 2, as we can just use object detection to generically detect support for a particular DOM property or method we want to use. In the DOM, the most commonly used method is:

document.getElementById

Due to this, we can just detect support for this method before proceeding with our DOM related code:

if (document.getElementById)
document.getElementById("div").getAttribute("align")