Credit: Mulchaey et al (ST Sci/UMD/NASA)
The
Document Object Model (DOM)
is the most important conceptual framework for
an HTML/JavaScript Web page, especially when working with Dynamic HTML
(DHTML). It is a strict hierarchical representation of all the
information
in a web page, and the most recent implementations of web browsers expose
nearly all of that structure to control by JavaScript, meaning that
everything can be dynamically controlled in terms of content, placement,
visibility, motion, etc.
While the DOM has been standardized for a while no current browser fully
implements the standards, although the recent versions of Mozilla come
very close. Internet Explorer 6 differs substantially from those
standards and older versions of Netscape (prior to Netscape 6.1) don't
even come close. As a result, JavaScript code written for one browser
is often incompatible with another, especially when it attempts DHTML.
Here is a very simplified outline of the DOM for an Internet Explorer
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
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 boxes the "value" is what you type in
- for 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 and test to see if it is "true"
- for Radio buttons, the "value" is also what appears in the
'VALUE=...' part, but to determine what value has been selected
you need to determine the
checked property of each
one of the array of options, e.g.,
f.experience[0].checked
f.experience[1].checked
f.experience[2].checked ... etc.
to find which one is true
- 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.
