DOMinating Web Requests: The Document Object Model

There are two parts of a web page that give newer techniques and technologies like Ajax their power: one is the asynchronous nature of the Request Object when controlled by Javascript.  The other is the ability to not see any web page in detailed terms of the objects on the page and the roots and bottom levels of those objects.
It is a fair assumption that once you view a web page as a series of nodes, elements and attributes, and values you will never view the web page the same way. Understanding a web page at this level, when combined with Javascript provides an amazing sense of power over the lowly web page.

Chances are good that you have already used the DOM without knowing it: if you have ever used the document. construct to gain access to a web page’s forms or cookies, or images all within an array format (zero-based, as any C programmer, will tell you the programming gods intended) then you have been using the DOM model without knowing it.

First, a few simple examples to whet your appetite: a visit to http://www.RamNet.net/DOM1.htm (its source can be found at http://www.ramnet.net/DOM1.txt)  and http://www.ramnet.net/DOM2.htm (with its source found at http://www.ramnet.net/DOM2.txt) will show you the kind of animation that simple DOM manipulation (and some magic Javascript!)  can accomplish. After downloading the code from the site above look for the variable defaultString and stick your own text in its place on your own server. Now execute it by opening it in a browser.  Bingo!  Play around with some of the variables in the source code: make it rotate faster or increase in font size over time.  You get the idea.

You can see the power of the DOM further with simple table manipulation as shown in http://www.RamNet.net/DOM3.htm (with its source available at http://www.RamNet.net/DM3.txt) — move the table, add rows and columns to it in real-time all entirely through the DOM.  Javascript, by the way, needs to be enabled as it will probably need to be for all DOM-related operations. In this regard, DOM operations are similar to Ajax operations.

I found the Document Object Model further defines an extension of the already formidable HTML model with extensions to its functionality and a hierarchical vision of a typical web page.  A careful look at the W3.org documentation available at DOM HTML Specification is a good start.

Read Also: Making A Web Site Cool With AJAX

A Warning

Although the DOM has been with us for quite a while, its current implementation is relatively recent and it has not always been implemented properly, completely, or correctly even in modern browsers — there are some implementation issues even with Internet Explorer 4.01 for example defensive programming (something that all programmers playing with something as constantly changing such as the Internet should always use) is called for. The web page you design to take advantage of all the modern gadgets and gizmos of the DOM will still have to work properly with visitors to your site using really old stuff — think back to the Netscape Navigator/Internet Explorer wars.  People are still using browsers older than you are!  Want proof?  Is your latest web page fully compatible with the “Mosaic” browser?  I didn’t think so!

Handling Browsers with no DOM Support

If you are an experienced Javascript programmer you may recall the “document.all” and “document.layers” arrays.  These were early contrivances that almost did the job of the DOM.  Please note the word “almost”.
A far more elegant solution to addressing each portion of the web page can be found in the DOM — at least with modern browsers (version 5.0+)

How can you tell whether or not a browser in use by a web page visitor is modern enough to take advantage of the DOM?  Use the following code and abort fancy effects if it fails:

if (typeof(document.getElementById) == “undefined”)

return;


simple enough code and I bet you belt-and-suspenders types will surround it with alert boxes.  I know I did.

You should always make sure that all of your content is visible even with old browsers. It is possible to degrade the page functionality for older browsers without losing essential content. Realize that any particular visitor to your web page that can’t see the content properly might also be a critical one. Making sure that your web page can be supported by even the simplest browsers can be as simple as seeing how it looks with Javascript turned off. Make sure that you’re using fancy effects to enhance a web page, not to display an integral portion of its content.  Additionally, I know of no search engines that can interpret embedded Javascript — or other – code. So content displayed this way will never get indexed.

For access to — and to change — the contents and DOM of the currently active (and displayed) web page it is important to know that Javascript or another programming language must be used.

The following arrays can be used to fetch and/or change various pieces of web page information, typically known as elements — these can most easily be accessed through the windows.document property: 

A CollectionDescription
anchors[]Returns a reference to all Anchor objects in the document
forms[]Returns a reference to all Form objects in the document
images[]Returns a reference to all Image objects in the document
links[]Returns a reference to all Area and Link objects in the document


Each of these arrays are zero-based and the number of items can be easily determined by access to the .length member/property of that array.

As an example, the number of anchors can be found in anchors.length, the third member of the array can be found at anchors[2] and can be displayed properly.

Curiously, the date and time of last modification for the currently displayed web page is not available for W3 compliant browsers! 

Where applicable, access to the W3C.org is only a click away.

Document Object Collections 

 Gives direct access to the element
cookieSets or returns all cookies associated with the current document
domainReturns the domain name for the current document
lastModifiedReturns the date and time a document was last modified
referrerReturns the URL of the document that loaded the current document
titleReturns the title of the current document
URLReturns the URL of the current document


There are various methods associated with the DOM, and to play it safe make sure they are available by using the above code to check the current browser for getelementbyid access.

Again, access to the applicable W3C documentation is only a click away:

Document Object Methods

MethodDescriptionIEFOW3C
close()Closes an output stream opened with the document.open() method, and displays the collected data419Yes
getElementById()Returns a reference to the first object with the specified id519Yes
getElementsByName()Returns a collection of objects with the specified name519Yes
getElementsByTagName()Returns a collection of objects with the specified tag name519Yes
open()Opens a stream to collect the output from any document.write() or document.writeln() methods419Yes
write()Writes HTML expressions or Javascript code to a document419Yes
writeln()Identical to the write() method, with the addition of writing a new line character after each expression419Yes

Ruben Harutyunyan

Back to top