Home
What's New
Dev Tools
Services
Feedback
Site Map

Document Object Model (DOM)

Each Browser has its own Document Object Model or DOM.  The DOM defines the hierarchy of webpage components. The appropriate hierarchy must be specified in JavaScript when accessing webpage components.  Most JavaScript reference books will provide a picture with all the DOM elements.  The discussion below will focus on the more commonly used elements and include brief code samples showing their use.

The DOM is discussed under the following sections:

Simplified Hierarchy

An diagram showing the simplified hierarchy is given below:

Document Object Model


Window Object

// alert (message with OK button)
window.alert("Process has been completed");
// confirm (message with OK/Cancel button)
result = window.confirm("Do you want to continue?");
// Prompt (one line of user input with OK/Cancel)
value = window.prompt("Enter shoe size");
onMouseOver="window.status = ‘Visit my hompage’; return true"

Note: must include return true after setting value in MouseOver (unusual special case).

Document Object (child of Window)

Most of the major components available within the page are part of the document. 

Form Object (child of window)

Form Elements

The following table lists a number of most commonly used elements on a form, with an example.

Form Elements Description Sample Definition
text Simple input field

Closely related element types are password (shows ***) and hidden (which are invisible but not secure).

<INPUT TYPE="text" NAME="firstName" SIZE=20>
textarea Handle input spanning multiple lines
<TEXTAREA NAME="myDirections" ROWS=5 COLS=50>
default text
</TEXTAREA>
select: single selection Provides a dropdown list of items to select (single value can be selected)

Note: in Nav3+ or IE4+, JavaScript logic can dynamically add or remove items from the select list.

<SELECT NAME=persTitle onChange="checkTitle(this)">
<OPTION SELECTED> Ms.
<OPTION> Mr.
<OPTION> Mrs.
</SELECT>
select: multiple selections Provides a list of items (multiple items can be selected)
<SELECT NAME=interest MULTIPLE
  onChange="checkInterest(this)">
<OPTION> Finance
<OPTION> Marketing
<OPTION> Production
<OPTION> Human Resources
</SELECT>
checkbox Used to indicate yes/no
<INPUT TYPE="checkbox" NAME="CB">
radio (buttons) Lets user select a single item from a fully visible list.
<INPUT TYPE="radio" NAME="grade"
  VALUE="9" CHECKED>Grade 9<BR>
<INPUT TYPE="radio" NAME="grade"
  VALUE="10">Grade 10<BR>
<INPUT TYPE="radio" NAME="grade"
  VALUE="11">Grade 11<BR>
<INPUT TYPE="radio" NAME="grade"
  VALUE="12">Grade 12<BR>
button Allows the user to explicitly initiate an action.
<INPUT TYPE="button" VALUE="To Lower"
NAME="lowerButton" onClick="setCase('lower')">
submit A special facility is provided for submitting the form to the server. In the top code segment, the form specifies the action on submit.

In the bottom code segment, a special submit input type is provided to let the user initiate the submit.

// checkForm function is initiated to
// determine if submit should proceed
<FORM NAME="form1"
onSubmit="return checkForm(this)"> 

 

<INPUT TYPE="submit"> 

 
Form Element Events

Form elements generally support a subset the following Event Handlers:

For example in the button row in the table above, you'll see that the JavaScript function setCase is initiated when the button is clicked.  A JavaScript reference book will indicate exactly which events apply to which form elements.

... back to JavaScript Topics or HTML/WebPage Topics


Copyright 1997-2017, Woodger Computing Inc.