<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> JavaScript Intro
<DHTML>
  spacerspacer

DHTML/DOM Intro

Background: DHTML is a marketing term used by Netscape and Microsoft to describe their version 4 browser capabilities that largely did NOT adhere to CSS standards. These companies were attempting to lure developers and users into their camps by extending the capabilities of their browsers to differentiate themselves from their competition.

DHTML today uses CSS to define objects on the page, The Document Object Model (DOM) to locate and trigger the objects, and JavaScript to change, hide or move those objects.

Document Object Model (DOM): The Document Object Model (DOM) was designed to allow developers to access elements on a page. These elements were navigated by starting at the "root" (top) of the DOM tree, and traversed down to elements contained in other elements that were considered "children" to the elements above it on the tree. The elements in terms of the DOM are called nodes. Each node can be considered related as in a family tree, with parents above it on the tree and possibly children below (inside) the element/node in question.

Accessing the DOM : Each element, and in turn, each element contained inside another element on the page can be identified, and addressed (apprehended) using the DOM. The element itself, each element inside, and even values can be available if applicable, for instance in this form element example:

document.formname.formelement.value;

Document is a controlled word, but we substitute the name of the form, and the name of the element in the example above. To read the current value of a textbox named "FirstName" on a form named "myForm" into a variable, we could do this:

var myValue = document.myForm.FirstName.value;

More Than One DOM: Each element can exist in more than one DOM, even on a single page. An example of this is an image, which also can be accessed via the following DOM:

window.document.images.imagename

Using the DOM to access an image can be more efficient if the image is contained in deeply nested elements.

ID vs Name : Until now we have used the "name" to identify the element we wished to access. We should start using both "names" and the "id" attribute to identify the elements, as "name" is being deprecated. The advice is to include both, and use a consistent word to define both of them in EVERY element which needs to be specifically accessed. For example:

<div name="myDiv" id="myDiv"><img src="alice31.jpg" name="myCat" id="myCat" /></div>

Both the div and image above have a consistent name and id.

Accessing the DOM via arrays: There is more than one way we can access some elements. Elements like forms and images exist as members of arrays of like elements on a page. This way elements do not need to specifically called out by name, but can be looped and treated in a for/next. Here we get data from a form element via an array:

var myValue = document.forms[0].elements[0].value;

This would access the value (data) in the very first element of the very first form on the page.

Positioning: While CSS version 2 was being finalized, an interim version called CSS-P was released. This was to address the need to "position" elements on a page.  Developers were to stop using tables for page design, and instead position with two special elements, the DIV and SPAN tags.  Here is an example of a DIV that is positioned via CSS:

<style media="screen" type="text/css">
<!--
#cheshireCat{
position: absolute;
top: 60px;
left: 30px;
}
-->
</style>

The unique "id" is "cheshireCat", as specified by following the pound sign. The coordinates (along an X/Y axis) where the top left corner of the object will be initially placed on the page are determined here, by the "top" and "left" properties. In this case, the object's top left corner will be placed 60 pixels down from the top of the screen, and 30 pixels over from the left of the screen.

The positioning type is declared to be "absolute", meaning that it will fall in place at coordinates despite other elements on the page.

The object is declared in an internal style sheet built into the page. The object specified here will be a DIV tag, which can be called out inside the HTML page as follows:

<div id="cheshireCat">
<img src="images/alice31.gif" width="379" height="480" border="0">
</div>

Note the purpose of the DIV tag is to store and therefore position it's contents, an image. The DIV can be called out anywhere on the HTML page, due to it's positioning via CSS. Many developers even elect to declare a DIV thus created OUTSIDE the actual HTML page!

Browser DOMs: While the CSS was being created, browser manufacturers created their own versions of the document object model, (DOM). Since the DOMs were non-standard, it was not until CSS2 came out that a unified method for accessing elements in a document was presented. The method was to assign the unique "id" number, and that method is carried out in Internet Explorer 6 and Netscape Navigator 6 and above.

Branching code needs to be used to accomodate a multiple DOM environment. Since each DOM requires different handling, most developers limit how many client browser versions they will accomodate. Sometimes support goes back to Netscape version 4.x, and IE version 5. The reason for support of version 5 is that it was native in a reload of Windows 98. Netscape 4.x frequently requires more handling, as it was being developed prior to finalization of CSS-P, and it relies on the so called "Netscape Layers" that were abandoned after that version of the browser. Lately many developers have left behind Netscape 4.x.

Browser Sniffing/Object Sniffing: Uneven support of the DOM led developers to determine or "sniff" distinguishing features of the client's browser while a page is loading via JavaScript.  Once the browser was identified, branching JavaScript code allows DHTML support for multiple DOMs.  Even this is an uncertain proposition, since the verrsion upgrades could occur during the life of the site.  If only browser version numbers were used, the script would fail when a new version was issued.  For this reason, browser sniffing determines not merely the manufacturer or version of the browser, but frequently sniffs for "objects" to see if they pass a simple test:

if (document.images){

//preload images, etc.

}

This test checks for a browser that complies with the DOM regarding images. Saying "document.images" is a shortcut for saying document.images == true. If the browser passes the test, then the DOM is accessed via this manner. This "object" sniffing is the method of choice. Click here for an example of what is available to a simple browser sniffer: browsersniff.htm

Cross Browser DOM APIs: Rather than write branching code in every page to accomodate browser DOMs, and then face the possibility of updating many pages when a new version comes out, developers began to create JavaScript include files that "sniffed" the object or browser and created a "handle" to an object via the specific browser's DOM. The script that does this was called an API, or Application Program Interface. The API allows us to call out code to interface with the object with which we are working, without having to write (or be aware of) the extensive code to do a proper job. The API we are using is "findDOM.js":

var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;

if (document.getElementById) {
    isID = 1;
    isDHTML = 1;

    } else {
    if (document.all) {
        isAll = 1;
        isDHTML = 1;
    } else {
    browserVersion = parseInt(navigator.appVersion);
    if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
        isLayers = 1;
        isDHTML = 1;
    }
  }
}
function findDOM(objectID,withStyle) {
if (withStyle == 1) {
    if (isID) { return (document.getElementById(objectID).style) ; }
else {
    if (isAll) { return (document.all[objectID].style); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
else {
    if (isID) { return (document.getElementById(objectID)) ; }
else {
    if (isAll) { return (document.all[objectID]); }
else {
    if (isLayers) { return (document.layers[objectID]); }
    }  
  }
  }
}

This API will function for NN4+ and IE5+.  Download this API here: findDOM.js

Screen Dimensions, Colors, etc.: We can sniff for the dimensions of the user's screen, the available browser window and the color depth the of the client computer rather easily. Click here, for a page that demonstrates these abilities: dimensions.htm

In theory, we can branch our code due to the user's limitations, although this is rarely done. We can also find the coordinates of a mouse click on a page. This is convenient to help us with our postioning (and moving) elements on a page during development: findCoord.htm

 

   
Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved