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.
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
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
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”)
simple enough code and I bet you belt-and-suspenders types will surround it with alert boxes. I know I did.
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:
|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 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|
|cookie||Sets or returns all cookies associated with the current document|
|domain||Returns the domain name for the current document|
|lastModified||Returns the date and time a document was last modified|
|referrer||Returns the URL of the document that loaded the current document|
|title||Returns the title of the current document|
|URL||Returns 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
|close()||Closes an output stream opened with the document.open() method, and displays the collected data||4||1||9||Yes|
|getElementById()||Returns a reference to the first object with the specified id||5||1||9||Yes|
|getElementsByName()||Returns a collection of objects with the specified name||5||1||9||Yes|
|getElementsByTagName()||Returns a collection of objects with the specified tag name||5||1||9||Yes|
|open()||Opens a stream to collect the output from any document.write() or document.writeln() methods||4||1||9||Yes|
|writeln()||Identical to the write() method, with the addition of writing a new line character after each expression||4||1||9||Yes|