|
|
 |
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")
|
