The Html DOM

When a browser reads and displays a web page, it organizes and stores a great deal of information. This information completely describes both the document and the window it is displayed in. This collection of organized information is called a "Document Object Model (DOM)." The DOM is important because it provides a way to access and dynamically change the properties of almost any object in a web page. It is the basis for Dynamic Html. Much JavaScript depends on the DOM as well.

The DOM is organized as a large tree of objects. Objects are items such as headings, paragraphs, tables, images and links. Each object contains properties which correspond to its attributes and content. Some objects such as forms and tables contain other objects, and most objects respond to certain events. The window and document objects also have methods, which can be used on their members.

It requires the many pages at W3C DOM Reference to describe the DOM. Following is a synopsis of its essential features.

The Window Object

Objects Contained Within the Window Object
The window object is the parent or ancestor of all other objects. These include:
window.parent the window containing this window
window.self this window the topmost window containing this window
window.opener the window that opened this window
window.history List of URL's seen by the window.
window.location Current URL
window.navigator Info about client's browser
window.screen Info about client's screen
window.frames[i] A collection of all frames in the window, if any.
window.document Contains all info about the document being displayed in the window.
Properties of the Window Object
window.screen.availWidth Gives screen width no matter what the window.
window.screen.availHeight Gives 948 no matter what the window.
window.screen.width Gives screen width
window.screen.height Gives screen height
window.length number of frames in the window
Window Object Methods

Both the Window Object and the Document Object have methods. These methods are functions, and they are always available for use by the browser. (You needn't learn javascript to use them.) The window methods include:

window.blur() moves the window behind other windows
window.focus() moves the window in front of all other windows opens a new window; proprietary to IE
window.print() prints contents of current window
window.scrollTo(x,y) scrolls to the specified position
window.clearTimeout(x) x is a variable equal to a previous setTimeout()
window.showModalDialog() produces a window that monopolizes focus
window.showModelessDialog() produces a window that always stays visible.

For a more complete description of the window object, see: W3C Window Object

The Document Object

Objects Contained Within the Document Object

The document object contains numerous other objects, including:

document.base Base URL to use for all relative URL's in a document.
document.body Contains basic properties relating to the body, as color, backgrnd image, size, etc.
document.iframe For inline frames
document.event describes all features of an event, e.g.
event.clientX - relative to document
event.screenX - relative to screen
document.anchors[i] an array of all anchor objects in the document.
document.images[i] an array of all image objects
document.forms[i] an array of all form objects
document.forms[i].elements[j] Each form object contains an array of all elements in the form. One element of this array is defined for each of the following objects in the form:
input, select, textarea.

Forms are uniquely useful in that they take in input from the reader (or client) of the webpage. This information is available in the DOM. One way to access it is to give names to the form, and to each input. The input then becomes:


where formName and inputName are the names (not id's) you have given to the form and input tags.

Each array of objects contains the length property, which gives the number of objects in the array.

document.anchors.length length of anchors array
document.images.length length of images array
document.forms.length length of forms array
document.forms[i].elements.length length of the elements array for the ith form object

Note: The array indices go from zero to the length minus one.

Another very useful property is the style property. Any element, whose style has been set using the style attribute, has the style property.

 document.[element].style --  where [element] refers to any object 

Note that paragraphs and headings are nowhere included in the list of document objects. They do exist in the DOM, however, because they can be accessed using getElementById(). See 'Methods of the Document Object' (below).

Likewise, the DOM contains a table object for each table tag within the document. These are only accessible with document.getElementById(). Once accessed, you can use expressions such as:


 Note:  the collections tbodies[j], rows[k], cells[l] are 
 supported by IE, but rows is the only one supported by Netscape.
Properties of the Document Object
document.bgColor background color
document.fgColor text color
document.linkColor color of anchor links
document.alinkColor color of active anchor links
document.vlinkColor color of visited anchor links
document.body Specifies the beginning and end of the document body
document.body.offsetWidth Actually gives available width of window or frame, so you can fit objects to the space available.
document.body.offsetHeight Actually gives available height of window or frame, so you can fit objects to the space available.
document.cookie Sets or returns all cookies associated with the document
document.domain Returns the document server's domain name
document.referrer Returns the URL of the document that loaded the current document
document.title Returns the title of the document
document.URL Returns the URL of the current document

Methods of the Document Object

The Document Object has methods including: -- Opens a document for writing
document.clear() -- Clears all elements in the document
document.write('text string') -- Writes a text string to a document
document.close() -- Closes the output stream and displays the sent data
document.getElementById('theId') -- Returns the object with that id. There should be only one.
document.getElementsByTagName("TAGNAME") -- Returns an array of objects.
Note: Using IE6, I find that getElementsByTagName requires that the tag name be in all caps, and be placed in double quotes: e.g. "P", "H1", "TD", etc.
document.getElementsByName("name") -- Returns an array of objects. Uses name, not id.

Note that the method

allows you to access any element in the document, whether it has an HTML DOM object name or not. For it to work, you must have given the object a unique id (not name); you must have used the appropriate closing tag; and your html should be impeccable.

Elucidating Array Keys of DOM Objects

It is possible to discern the structure of DOM objects by using the following JavaScript code.

 var x=someDOMObject;
 for (var i in x){
  document.write(i, x[i]);

For a more complete description of the document object see: W3C Document Object

Copyright July 2005, 2006 by Nancy E. Knox