HTML Markup | JavaScript | Java | Computer Sci | Home & Links

Tutorial 5 - DOM techniques

The W3 Consortium document object model (DOM) extends script access to virtually every HTML element using objects as the modeling paradigm. Scripting languages can dynamically modify the look of a page as they react to events. w3schools.com is a great tutorial on the DOM model and for further info check QuirksMode.com. This page examines DOM techniques such as element access and various object properties.

Beware: Many DOM objects are browser dependent. Sometimes they don't exist in a particular browser or they may act in a different way. Heavy testing with various browsers is required! The w3.org DOM support test is a good resource.

Accessing Elements Using DOM

The procedure for setting up access to an element is:

1. Establish appropriate property values for the element's class [CSS]
2. Identify the element with a unique id attribute [HTML]
3. Set a class group attribute for the element [HTML]
4. Create an activating event that passes the identifier [HTML]
5. Capture the element's object by using the DOM document.getElementById('idname') method [script]
6. Work with the element's style, visibility, content or position [script]

Object Explorer Tool

The object explorer tool displays all the properties in a selected object. It uses a for-in loop which works a bit differently than the usual for loop that we have been using for string scanning. Instead of incrementing a counter, for-in loops increment their way through the named object's properties.

This example displays the properties that a specific browser agent contains in its navigator object. Note that many of the properties are not available on older or other browsers. It is worth while checking for yourself by running this example with each of the browsers that you have on your comuter.

In this example the named object was navigator which identifies the browser and some of its capabilities. But you can also explore other objects such as window by replacing the word navigator with the specific object.

Object Position|Dimension

You may need to find the absolute position or dimensions of an object on a page regardless of font-sizing, zooming or window resizing. One application is positioning a floating menu in a sidebar where it does not float upwards into any static information in the sidebar.

Viewport Window Size

Many applications require knowing the current viewport window dimensions (possibly resized). DOM provides document.documentElement.clientWidth and document.documentElement.clientHeight properties.

Warning: Depending on docType used, the DOM0 document.body… may be needed instead. This is because of the 'crappy' QUIRKS MODE concept. Even worse - different browsers use different modes on some docTypes.

There are times when you will want to prevent an object from scrolling out of the viewport. By checking its position against zero you can spot top|left edge loss and by checking its position against the viewport size you can spot bottom|right edge loss. marginTop and marginLeft can be adjusted to put the element back in bounds.

Cursor Location | PopUps

Some dynamic positioning applications are dependent on cursor location. This is determined in different ways depending on browser. Here is a reliable getMouse() function for those who need to use cursor positioning based on document location (xMouse) or screen(xMouse2).

Popup boxes allow the display of annotations, attributions, citations, definitions, tooltips or other small notes while retaining the original page's context (unlike tabbed windows). Popups can also be animated.

This example uses the cursor location to determine the display position. The onmouseover event is used to activate the popup but onclick or button can also be used. The window size adjusts to fit the text message of each menu. The popup object can be styled. View the source code for this topic to see how the html is constructed. The popup styling is contained in the pop class rules in this page's style element. View the script and search for 'popup box demo'. Hover one of the links below to see the effect.

Note: Popup boxes can also be created using an ' open window' function but BEWARE as browsers now use 'ad-buster' routines to disable window popups.

Example: Drag and Drop

Adding drag and drop capabilities to any page element allows it to be repositioned by the user. To make this happen:

1. Know where the mouse cursor is! The cursor location routine can be used
2. Make the element react to an onclick event
3. Adjust the element's position

Good references for this topic are WebReference and w3schools.

Note: If you want the page to remember the new position, use a cookie.

Equalized Column Heights

The common practice for parallel columns is to use either float or absolute positioning within a div structure. However the columns can be of unequal height which is unattractive when they are colored differently.

By default the height property is content dependent. Setting it to a specific size would not respect resizing and font changes. Unfortunately w3.org chose to interpret height:100% to be relative to the window and not to the document! Using the dimensioning routines from above you can guarantee columns are equal in height.

Relocation on Page Timeout

The location object has an href property which can be set to an URL which will be jumped to. This URL reference can be local or to a new document and can be dynamically set in script. Jumps can be initiated by events (onclick or onmouseover), by using the system's date object, by using a timer or by browser sniffers (eg. skip page when browser does not support specific code on that page).

This example watches how long the page has been displayed and transfers to another page when timed out. The application is perfect for a static splash screen or a front 'intro' page. Be sure to use the onLoad event to initialize the timer function.

The setTimeout() function transfers control to the function pointed at by its first parameter [page2] after a delay set by the second parameter [limit] (in milliseconds).

URL Sniffing

The URL of the current page can be read using location.href. This can be used to have the same document on different servers show a different title block image or logo. An example of this is:

To make the function work you must include onload="site()" in the body element of appropriate documents or add the contents of the function to an existing initialization function.

---