'JavaScript' Document Object Model

Credit: Mulchaey et al (ST Sci/UMD/NASA)

The Document Object Model concept really belongs to the browser, as opposed to the language. The JavaScript language remains the same no matter which browser it deals with. However, the names and variables that it operates on sometines depend on which browser you use. If you stay away from DHTML, the names and references are often the same, but DHTML references are very different for Netscape versus Internet Explorer. Here is a very simplified outline of the structure of a web page:

• Window: the top of the heirarchy
  • navigator: contains information on the browser and the client
  • event: contains information on mouse/other events
  • frames: these are declared with the "frameset" HTML code
  • document: contains the main content of a window
    • all: in IE4 this accesses all style sheet elements
    • body: the main body of the document
    • forms: container for all forms elements
      elements: text, buttons, select-one, etc
    • images: all images declared with <IMG SRC...>

The key to successfull navigation is understanding how these objects and elements are referenced. Most of these can be referenced either by name or by index. This is demonstrated by the this this example.

In a similar manner you can refer to images that appear in <IMG SRC...> statements either by name or by document.images[0], document.images[1], You can not only go down the heirarchy, but up as well. Thus if you are in an element inside a form, then this.form.elements[2] refers to the 3rd (sibling) element of that form.

The value property can be confusing. The rules are:

• for Text and TextArea the "value" is what you type in
• for Radio and Checkboxes, the "value" is what appears in the 'VALUE=..' part of the element, e.g., VALUE="home". But to determine if that value is selected you use the checked property
• the select has the "value" listed in its list of "OPTION VALUE=" values. The one that is selected is its value.

Frames are independently scrollable areas in a window that behave very much like independent windows. See this for an example of how to reference and manipulate Frames in HTML.

Class Topics

Client-Side JavaScript

JavaScript as a Programming Language

Execution of JavaScript

"JavaScript" Document Object Model

Programming with JavaScript

Using Cookies in JavaScript

Using JavaScript to Write HTML

JavaScript and DHTML

JavaScript and CGI

Homework Assignments

©1998 UW Computing & Communications