< Main, slides version for more script demonstrations and/or for magnifications over 200%.]


Introduction to DOM, by Dr Sam

Straight-Text Version

Page 1 : Page 2 >

Contents

Introduction

[Page Top]

A Vanguard Standard

DOM is the Document Object Model. It is the way forward.

It has become a standard, defined by the W3C . The current, complete standard is DOM version 1 while version 2 has already been put forward by the W3C as a recommendation (pending approval as a standard) and version 3 is being drafted.

All of the major graphical browsers have implemented DOM as an integral part (part-and-parcel) of their products. DOM was implemented in MSIE5.5 to a considerable extent. It has been implemented more-so in MSIE6 as well as Net6 and Opera7.

Its capacity is amazing.

DOM gives access to each and every element in an electronic document (be the document HTML, XHTML, or XML): yes, each and every element, from top to bottom of a document.

The programmer/designer today just needs to call the element by its id or by its position in the document ~ to change any element dynamically across browsers.

To begin to understand this, let's look at:

[Page Top]

DOM & BOM

Some resources differentiate between the Document Object Model (DOM) and the Browser Object Model (BOM). While some others do not make the distinction explicitly, the difference between DOM and BOM can be useful as a concept.

The Browser Object Model (BOM) makes objects of elements that are proper to the browser.

We are using the Browser Object Model (BOM) whenever we open a new window or whenever we create an alert or create a prompt or whenever we alter the status bar message, etc. Those objects belong to the browser.

For example, when we open a new window, we are using BOM syntax:

window.open();

The object is the window itself. The window belongs to the browser. So, it is a browser object, and the syntax is BOM, as we may say.

The document is called through a property of the window object:

window.open("url");

The window is the object in this instance. The document is not the object in the BOM syntax in this instance.

BOM can affect the appearance of some parts of a document sometimes. The following BOM syntax is an example:

document.bgColor="#color"

Its fuller syntax indicates the relationship more clearly:

window.document.bgColor="#color"

The document has become window object here in the Browser Object Model (BOM) and so has the background color.

Yes, through its own syntax, BOM can affect some parts of a document sometimes ~ with the document as an object of the browser's window.

The Browser Object Model (BOM) is different in this way from the Document Object Model (DOM).

In contrast, DOM concentrates on the document itself and is far more thorough in its potential affects throughout a document.

[Page Top]

Document Tree Structure

In the Document Object Model (DOM), the entire document, from the opening <html> at the top, is organized into a "tree structure", rather like this:

<html>
/\
<head><body>
/\/\
<title><style><h1><p>
|||
TextTextText

The diagram is representative. The tag in the diagram represents a tag pair in the document (whenever a tag pair is involved); for instance:

<p>
   |   
Text

That means this:

<p>Paragraph Text</p>

When nesting occurs, the document tree becomes more complex:

<html>
/\
<head><body>
/\/\
<title><style><h1><div>
||/\
TextText<p><p>
||
TextText

We can call any element in a document by referring to its position in the document's tree structure ~ any tag, any attribute, any text-node in the head or body of a document.

Much can be done. Attributes can be deleted or added. Tags can be deleted or added or moved. Text can be deleted or added or moved around. Text can be highlighted, enlarged. Page contents can be rearranged by user interaction. Contents can be reconstructed for user preferences. Yes, much can be done . . .

For the DOM tree to work, the mark-up language must valid and complete. The following are vital:

Validation

The W3C parse for HTML-strict, XHTML, and XML will alert you whenever an ending tag happens to be missing or an element happens (through improper nesting) to be misplaced.

The parse for HTML-transitional won't. Look carefully at its DTD: it says "dtd-loose". An HTML-transitional document may validate although some closing tags are missing or some elements are misplaced.

[Page Top]

A Threshold

The potential of DOM has not been actualized to any fulness on the internet yet.

How could it be? Net6 was rather cumbersome when it was initially released, was it not? Net7, which is nifty, became available in December 2002. Opera7 followed, in Spring 2003.

So, today, we are at a threshold in relation to the potential of DOM. You are emerging at this threshold.

You have been introduced to the vitality and timeliness of DOM now. Resources will become available for you at the end of this lesson to learn more. I hope you will take the initiative, because DOM is the way forward for dynamic content.

Here, together in our lesson, we shall concentrate on a few methods, or techniques, at the elementary level of DOM. These have been used quite widely for a while. They are powerful. You should be able to use them immediately.

Methods

[Page Top]

getElementById

Through the introduction to this lesson, we've found that we can manipulate any element in a document by referring to the element's position in a document's tree structure. That is advanced. We can also manipulate an element by calling its id alone. This is easier:

document.getElementById("id")

Actually, the element's own id would be set inside the quotation marks. Yes, DOM makes it so easy.

There are other methods, such as the following one:

document.getElementsByTagName("DIV")

It would summon all of the div tags in a page. We can put any sort of tag into the formula, and thus call everyone of that sort, all at once.

Through our lesson, we shall concentrate on the first method introduced here, as it can be so useful:

document.getElementById("id")

We get the element by its id. We call it. We can then manipulate it.

For instance, if the element happens to be an anchor tag, we could extend the object to its href:

document.getElementById("myLink").href = "url";

We would manipulate it by changing the url.

We could extend the object to an element's style, for instance:

document.getElementById("myDiv").style.backgroundColor = "#ffffff";

We could do this for almost any element in the body of a document: a division element or a paragraph element or a span element or a list element, etc.

[Page Top]

DOM Style Syntax

Look again, now more closely, at the DOM syntax for the style:

style.backgroundColor = "#ffffff";

It resembles the following BOM example, doesn't it?

bgColor="#ffffff";

They are not the same, however. DOM and BOM are different:

DOMdocument.getElementById("id").style.backgroundColor = "#ffffff";
BOMwindow.document.bgColor="#ffffff";

They may resemble each other somewhat. They may produce the same effect in these examples. Different they are, nevertheless: DOM and BOM.

[Page Top]

Coordination of Standards

Notice that the DOM style syntax is exactly parallel to CSS:

DOMstyle.backgroundColor = "#ffffff";
CSSstyle="background-color:#ffffff"

This similarity is meaningful: DOM and CSS have been developed to work together ~ and all of the styles that are available to us with CSS are available to us with DOM.

Compare these, for instance:

DOMCSS
style.backgroundColor="#ffffcc";style="background-color:#ffffcc;"
style.color="#0000ff";style="color:#0000ff;"
style.textDecoration="underline";style="text-decoration:underline;"
style.display="none";style="display:none;"
etc.

The same logic is applied whenever we wish to adapt a CSS spec for scripting with DOM.

Yes, CSS and DOM have been developed as standards to work together. They also work along with valid HTML (XHTML, XML).

An Example

Let's see how these standards work together. We are able to set a style with CSS like this:

<style type="text/css">
#ourExample { display:none; }
</style>

This style will hide the element: it will not be displayed. The hash mark is a short-hand method in CSS:

#ourExample { display:none; }

The style will be applied to the element with the id. We are using a div for our example. The style display:none will be applied to it:

<style type="text/css">
#ourExample { display:none; }
</style>
<div id="ourExample">

The div will not show when the page is loaded or reloaded. The CSS will hide it.

Now, let's set the opposite style for the same element with DOM. This will display the element:

document.getElementById("ourExample").style.display="block";

The element will be hidden at download and at reload because of the CSS. Then, the DOM will show the element whenever a certain script is activated. The element will be off, then turned on.

How could we activate the DOM style? ~ through a javascript function:

<script type="text/javascript">
function showOurExample()
{
document.getElementById("ourExample").style.display="block";
}
</script>

We can write almost any name or combination of letters for our functions. The function's name itself does not create the effect. We could have written planetZed() instead of showMyExample() and it would have the same effect. The name that we have written in our example just reminds us about the purpose of our javascript.

We are using popular vocabulary when we refer to "javascript". More specifically, we may say that we are creating the function with ECMA script, which is javascript standardized. These standards are working together today: ECMA script (javascript standardized) with DOM with CSS with XML/XHTML/HTML.

Let's allow our visitor to activate the function. How could we do this? ~ by creating an event handler.

Find the event handler in the page source that comes next. Be sure to read the text around the event handler. (Having read the text, you may more easily recognize the effects when you see them in the demo, which will come later.)


The Page Source
(simplified for study)
<head>
 
<style type="text/css">
#ourExample { display:none; }
</style>
 
<script type="text/javascript">
function showOurExample()
{
document.getElementById("ourExample").style.display="block";
}
</script>
 
</head>
<body>

 
<div id="ourExample"> This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM. </div>
 
<p><a href="javascript:void(0);"
onclick="showOurExample(); return false;"> The event handler will activate the script function.</a> The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless. </p>

 
</body>
</html>

(1) The Page Display

This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.

The event handler will activate the script function. The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.


We can add more styles to our CSS. We are hardly limited:

<style type="text/css">
#ourExample { display:none;
background-color:#ffffcc; color:#000000;
border:solid thin #000000; padding:.5em; }
</style>

Let's see this happen, next . . .


(2) The Page Display

This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.

The event handler will activate the script function. The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.


We've created a function to display our hidden element. We could create another function to hide it again:

<script type="text/javascript">
function hideOurExample()
{
document.getElementById("ourExample").style.display="none";
}
</script>

The other function would return the element to its original style: display="none".

We could place an event handler for this function inside our hidden element, as we shall see next . . .

Here is the other function nested inside our hidden element. It will hide our element again, after the element has been displayed:

<div id="ourExample">
<p>This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.</p>
<p style="text-align:center;"><a href="javascript:void(0);"
onclick="hideOurExample(); return false;">Close this note</a></p>
</div>

(3) The Page Display

This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.

The event handler will activate the script function. The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.


Would you like to glance at the representation of the page source? ~ to review the placement of our elements and functions?

Yes, please. Show me the source. |

No, thanks. Go to Page 2 now. |


The Page Source
(simplified for study)
<head>
 
<style type="text/css">
#ourExample { display:none;
background-color:#ffffcc; color:#000000;
border:solid thin #000000; padding:.5em; }
</style>
 
<script type="text/javascript">
function showOurExample()
{
document.getElementById("ourExample").style.display="block";
}

function hideOurExample()
{
document.getElementById("ourExample").style.display="none";
}
</script>
 
</head>
<body>

 
<div id="ourExample">
<p> This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM. </p>
<p style="text-align:center;"><a href="javascript:void(0);"
onclick="hideOurExample(); return false;"> Close this note </a></p>
</div>
 
<p><a href="javascript:void(0);"
onclick="showOurExample(); return false;"> The event handler will activate the script function.</a> The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless. </p>

 
</body>
</html>

Option: Review?

Would you like to review the effect in the page display?

Yes, let me return to the page display. |

No, thanks. I'd like to go forward. |


Next Page >


Straight-text version: Page 1 : Page 2 >

Introduction to DOM, by Dr Sam
copyright |  contact
published by OxfordU.net

Web-Design Tutorials by Dr Sam


Top of this Page