| Document Object Model |
| The Document Object Model has been around since browsers support JavaScript. From Netscape 2 onwards, web programmers wanted to access bits of HTML and change its properties. For instance, when you write a mouseover script you want to go to a certain image on the page and change its src property. When you do this, the browser reacts by changing the image on the screen. |
| The function of the Document Object Model is to provide this kind of access to HTML elements on your page. Exactly what elements you can access in which way and exactly what you can change depends on the browser. Each higher browser version gives you more freedom to reach any element you like and change anything you like. |
| History of DOM |
| There are three DOM levels: |
| 1. The Level 0 DOM, supported from Netscape 2 onwards by all browsers. This DOM is treated below on this page. |
| 2. The two Intermediate DOMs, supported by Netscape 4 and Explorer 4 and 5. Note that the use of these DOMs is not necessary any more; I advise you to ignore them. These DOMs are treated on the archived Intermediate DOMs page. |
| 3. The Level 1 DOM, or W3C DOM, supported by Mozilla and Explorer 5. This DOM is treated in its own section. |
| DOM (Document Object Model) is the way to access things on the screen. And, as we’ve examined, there are numerous browser-inconsistancies from accessing layers with document.layers to document.all to document.getElementById. |
| To standardize the DOM, W3C created a future more standard Document Object Model, which is in place in some current browsers, at least partly, and will be in place (it should be) in future browsers. Currently, IE 5 supports most of the features we’ll review, and NS 6 should support all of them, but both can present some problems. |
| The Consortium’s goal, of course, is to have one standard. We’ve discussed accessing and manipulating layers, but with the W3C DOM, you can control almost every element on the page, create elements out of thin air, never use document.write() again, alter a page instantaneously, and much more. |
| Hierarchical Structure |
| The key to the DOM is its hierarchical structure and “family tree-like” structure. “document” refers to the actual page and content for that page; it is the “top of the tree,” and everything else is underneath it. |
| For example, the <HTML> tag is under the document and the <HEAD> tag is under the <HTML> tag; which as we said before, is under the document; etc…. |
| To try to understand DOM and what it is, I’m going to use an example of a family tree. The top would be our parents and the next branch is a different person, etc…. In a real HTML document, the top would be our document, and the “branches” of the DOM “tree” are called “nodes.” |
| Every element in a page are nodes. Examples might include <li>, <p>, and <td> tags, as well as text. In fact, every attribute, such as align=”center”, is (to some extent) a node. Even the value of an attribute (such as “center”) is a node (a text node). |
 |
| As you might guess, browser incompatibility is the cause of all the trouble for the different ways to access a layer. When NN 4 (Netscape Navigator 4) was introduced, it was the first “DHTML browser.” |
| Unfortunately, it was released before the W3C (World Wide Web Consortium) could issue recommended standards for the DOM. IE 4 (Microsoft Internet Explorer 4) uses a more advanced DOMin which every HTML element is programmable; however, it’s nowhere near perfect. |
| With the related issuance of W3C standards and the introduction of IE 5 and NN 6, DHTML is now much more powerful and standard. Authors who want their pages to be available for all viewers are left to clean up after the war. |
| Let’s look at an example. At first, we’ll be working with absolutely positioned layers; later on, we’ll have a go at relative positioning. |
| <div id=”myLayer1″ style=”position:absolute;top:100;left:150;z-index:3″></div> |
| How would each browser access this object? Let’s start with the “senior” model and work our way along historically. Note that layerID stands for the ID assigned to that particular layer. In our example layer, the layerID would be “myLayer1”. |
| Netscape 4+ |
| In NN 4, you can access a layer with: |
| document.layers[i] or document.layers[layerID] or document.layers.layerID or document.layerID |
| We’ll focus on document.layers[layerID] in this tutorial. To access our example layer, the code would be: document.layers[“myLayer1”]. |
| Internet Explorer 4+ |
| With IE 4, you use: |
| document.all[layerID] or document.all(layerID) or document.all.layerID or layerID |
| We’ll concentrate on the first method, but use whichever you want when you get scripting. To access our example layer, the code would be: |
| document.all[“myLayer1”]. |
| W3C DOM (Internet Explorer 5 and Netscape 6) |
| Finally, there’s the W3C DOM recommendation utilized by IE 5 and NN 6: |
| document.getElementById(layerID) Thus: document.getElementById(“myLayer1”) |
| We can use these same methods for the neat trick of detecting which browser a viewer is using. Consider the following code: |
|
if(document.getElementById){ |
| Backward compatible? |
| It’s a good time to note here that IE 5 is backward-compatible, meaning that it can use both document.getElementById and document.all to access a page’s elements. So, if you said: |
| if(document.all){ // would return IE 4 and IE 5 } |
| But because of our if-else() structure in our previous example to detect browsers, that won’t happen, and Internet Explorer 5 users will only return true on the first if() statement. |
| This is also a good time to note that Netscape 6 is not backward compatible, so you can’t use document.layers to access an element in it |