Computing Science 2355 | Some Information about the DOM and Client-Side JavaScript

Some Information about the DOM and Client-Side JavaScript

The DOM, as it is almost always affectionately called (probably because Document Object Model is too much of a mouthful to keep repeating) is the language-independent API (Application Programming Interface) that JavaScript and other programming languages can use to get access to and manipulate the various parts of a web page.

The DOM as an Object Hierarchy

The DOM provides an "object hierarchy" model of a web page. The best way to get a feeling for this concept is to study a good example. There are surprisingly few good small examples out there on the web that include both markup and a corresponding DOM diagram. One example which is both concise and good, however, may be found here, along with some useful additional discussion.

The JavaScript Execution Environment and the DOM

It is useful to have a sense of the relationship between the JavaScript "execution environment" and the "Document Object Model" (the DOM), so that you will be better able to access the various DOM elements when working in JavaScript.

The window object for a given window on your screen contains:

All implicitly declared variables in any of the JavaScript scripts associated with the (X)HTML document displayed in that window
A document object which is a reference to the (X)HTML document displayed in that window, and which in turn contains the following arrays of elements (if such elements exist):
- forms[].elements[]
- anchors[]
- links[]
- images[]
- applets[]
A frames[] array containing all of the frames (if any) used by the displayed document

Examples of how to access DOM elements in JavaScript (relative to the following markup):

<body>
  <form action="" id="myForm" name="myForm">
    <input type="button" value="Click Me" id="clickMe" name="clickMe" />
  </form>
</body>

This is the preferred method:
document.getElementById("clickMe")
This method is widely used, but probably should now be avoided:
document.myForm.clickMe (myForm is the value of the name attribute of the form element)
There are a number of reasons for avoidance, among them inconsistencies in the way different browsers handle the name and id attributes in this context, and the fact that XHTML elements that are not form controls may no longer even have a name attribute.
The following method of element access may be useful if you are processing all elements of a particular kind in the same way, but it can easily break down if you depend on finding elements in the same place each time and new elements are added or the order of elements changes:
document.forms[0].elements[0]

Additional Notes

See the W3Schools site for the HTML DOM elements available via JavaScript.

Best Practices

The preferred method of accessing a DOM element is getElementById().
Try to write scripts that do not depend on either "browser sniffing" or "platform sniffing".

Potential Gotchas

To access a CSS style with a hyphenated name via JavaScript, convert the hyphenated name to camel notation.
Example: background-color becomes backgroundColor
Remember that the document.write() method can only be used when initially loading a page. Using it after the fact will overwrite the entire page.