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.
window.parent | the window containing this window |
window.self | this window |
window.top | the topmost window containing this window |
window.opener | the window that opened this window |
window.frameElement | |
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. |
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 |
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.alert() | |
window.blur() | moves the window behind other windows |
window.close() | |
window.confirm() | |
window.focus() | moves the window in front of all other windows |
window.open() | opens a new window; proprietary to IE |
window.prompt() | |
window.print() | prints contents of current window |
window.scrollTo(x,y) | scrolls to the specified position |
window.setTimeout(function,milliseconds) | |
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 contains numerous other objects, including:
document.meta | |
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.frameset | |
document.frame | |
document.iframe | For inline frames |
document.event | describes all features of an event, e.g. event.clientX - relative to document event.clientY event.x event.y event.screenX - relative to screen event.screenY |
document.object | |
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:
document.formName.inputName.value
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:
document.getelementbyid('tableId').rows[i].cells Note: the collections tbodies[j], rows[k], cells[l] are supported by IE, but rows is the only one supported by Netscape.
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 |
document.open() -- 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
document.getElementById('itsId')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.
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