Introduction to the DOM of IE/ Firefox
What is the DOM?
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:
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")