Document Object Model (DOM)
The DOM is discussed under the following sections:
An diagram showing the simplified hierarchy is given below:
// 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");
For example, to set text in status bar during a mouseover event for an HTML element:
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)
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)
<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)">
Form elements generally support a subset the following Event Handlers:
book will indicate exactly which events apply to which form elements.