The HTML Document Object Model

The JavaScript Object Model

The JavaScript Object Model is a hierarchy of JavaScript objects, each of which provides programmatic access to different aspects of and HTML page or the Web browser window. You can use methods and properties of objects in the JavaScript object model to manipulate the window, frames, and HTML elements displayed in a Web browser.

The objects that can be defined on a web page are created through a hierarchy defined by the browser. Whatever is defined through HTML tags – such as a window, a form, a radio button, or a text field – becomes an object that can be accessed programmatically such as using JavaScript.

The Window object is the top-level object. It represents a Web browser window or an individual frame within a window. The Web browser automatically creates the Window object, and you can use its properties and methods to control the Web browser window.

Another important object is the Document object that represents the HTML document displayed in a window. The Document object descends from the Window object, which in turn several object collections such as Form, Plugin, Applet, Anchor, etc. All HTML elements (such as text box, raio btton, check box, submit button, etc.) descend from the Form object. Thus there can be several forms in a document and there can be many types of HTML elements in a from.

The Document Object Model (DOM)

The W3C Document Object Model (DOM) defines standard set of objects for representing HTML and XML documents, and a standard interface for accessing and manipulating them. Because it is part of the web browser, it is platform and language independent.

The DOM views HTML documents as a tree structure of elements embedded within other elements. All elements, their containing text and their attributes, can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements can be created by the DOM.

The following tree shows the hierarchy of DOM objects. At the top of the hierarchy is the document object. It in turn contains objects such as forms, applets, anchors, ids, and so on. The form object has many HTML elements such as text box, checkbox, submit button, etc.

The DOM is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript. We will mainly use JavaScript.

The DOM Objects

Followingis a listing of some common DOM objects along with their brief descriptions.

Object / Description
Anchor / Represents an HTML a element (a hyperlink)
Applet / Represents an HTML applet element. The applet element is used to place executable content on a page
Area / Represents an area of an image-map. An image-map is an image with clickable regions
Base / Represents an HTML base element
Basefont / Represents an HTML basefont element
Body / Represents the body of the document (the HTML body)
Button / Represents a push button on an HTML form. For each instance of an HTML <input type="button"> tag on an HTML form, a Button object is created
Checkbox / Represents a checkbox on an HTML form. For each instance of an HTML <input type="checkbox"> tag on an HTML form, a Checkbox object is created
Document / Used to access all elements in a page
Event / Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons
FileUpload / For each instance of an HTML <input type="file"> tag on a form, a FileUpload object is created
Form / Forms are used to prompt users for input. Represents an HTML form element
Frame / Represents an HTML frame
Frameset / Represents an HTML frameset
Hidden / Represents a hidden field on an HTML form. For each instance of an HTML <input type="hidden"> tag on a form, a Hidden object is created
History / A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a browser window
Iframe / Represents an HTML inline-frame
Image / Represents an HTML img element
Link / Represents an HTML link element. The link element can only be used within the <head> tag
Location / Contains information about the current URL
Meta / Represents an HTML meta element
Navigator / Contains information about the client browser
Option / Represents an option in a selection list on an HTML form. For each instance of an HTML <option> tag in a selection list on a form, an Option object is created
Password / Represents a password field on an HTML form. For each instance of an HTML <input type="password"> tag on a form, a Password object is created
Radio / Represents radio buttons on an HTML form. For each instance of an HTML <input type="radio"> tag on a form, a Radio object is created
Reset / Represents a reset button on an HTML form. For each instance of an HTML <input type="reset"> tag on a form, a Reset object is created
Screen / Automatically created by the JavaScript runtime engine and it contains information about the client's display screen
Select / Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created
Style / Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied
Submit / Represents a submit button on an HTML form. For each instance of an HTML <input type="submit"> tag on a form, a Submit object is created
Table / Represents an HTML table element
TableData / Represents an HTML td element
TableHeader / Represents an HTML th element
TableRow / Represents an HTML tr element
Text / Represents a text field on an HTML form. For each instance of an HTML <input type="text"> tag on a form, a Text object is created
Textarea / Represents an HTML textarea element
Window / Corresponds to the browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag

Referencing Objects

When referencing a object on a web page, you must precede it s name with the name of each of its predecessors, if nay, separated by a period. The Window object is the only exception, because only one window is ever at the top, you don’t have to mention it. For example, a textbox named lastNameis contained within a form named customerForm, and to access the value (property of the box) entered in the text box, we write:

document.customerForm.lastName.value

Writing a text on to the document using the write method: document.write(“This is some text”).

In the following we describe few of these objects along with their collections, methods, properties, and events.

The Document Object

The Document object represents the entire HTML document and can be used to access all other elements in a page.

Document Object Collections

Collection / Description
anchors[] / Returns a reference to all Anchor objects in the document
applets[] / Returns a reference to all Applet objects in the document
attributes[]
childNodes[]
embeds[] / Returns a reference to all embedded objects in the document
forms[] / Returns a reference to all Form objects in the document
images[] / Returns a reference to all Image objects in the document
links[] / Returns a reference to all Link objects in the document
plugins[]
stylesheets[]

Document Object Properties

Property / Description
alinkColor / Sets or returns the color of the active links in the document
bgColor / Sets or returns the background-color of the document
body / Specifies the beginning and end of the document body
cookie / Sets or returns all cookies associated with the document
documentElement / Returns a reference to the root node of the document
domain / Returns the document server's domain name
fgColor / Sets or returns the text-color of the document
lastModified / Returns the date and time the document was last modified
linkColor / Sets or returns the color of the links in the document
referrer / Returns the URL of the document that loaded the current document
title / Returns the title of the document
URL / Returns the URL of the current document
vlinkColor / Sets or returns the color of the visited links in the document

Document Object Methods

Method / Description
clear() / Clears all elements in the document
close() / Closes the output stream and displays the sent data
createAttribute("name") / Creates an attribute with a specified name
createElement("tag") / Creates an element
createTextNode("txt") / Creates a text string
focus() / Gives the document focus
getElementById() / Returns a reference to the first object with the specified ID
getElementsByName() / Returns a collection of objects with the specified NAME
getElementsByTagName("tag") / Returns a collection of objects with the specified TAGNAME
open() / Opens a document for writing
write() / Writes a text string to a document
writeln("str") / Writes a text string followed by a new line character to a document opened by open()

Document Object Events

Syntax: document.event_name="someJavaScriptCode"

Event / Description
onClick / Executes some code when a Click event occurs
onDblClick / Executes some code when a Doubleclick event occurs
onFocus / Executes some code when a Focus event occurs
onKeyDown / Executes some code when a Keydown event occurs
onKeyPress / Executes some code when a Keypress event occurs
onKeyUp / Executes some code when a Keyup event occurs
onMouseDown / Executes some code when a Mousedown event occurs
onMouseMove / Executes some code when a Mousemove event occurs
onMouseOut / Executes some code when a Mouseout event occurs
onMouseOver / Executes some code when a Mouseover event occurs
onMouseUp / Executes some code when a Mouseup event occurs
onResize / Executes some code when a Resize event occurs

Document Objects

The document object is the parent of all the other objects in an HTML document. The document.body object represents the <body> element of the HTML document.

The document object is the parent of the body object, and the body object is a child of the document object.

Document Object Examples

The DOM defines an HTML document as a collection of objects. Objects have properties and methods. Objects can respond to events. This coding example shows how the background color of an HTML document can be changed to yellow when a user clicks on it:

<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body</html>

Object Properties

HTML document objects can have properties (also called attributes). The document.body.bgColor property defines the background color of the body object. The statement document.body.bgColor="yellow" in the example above, sets the background color of the HTML document to yellow.

Object Events

HTML document objects can respond to events. The onclick="ChangeColor()" attribute of the <body> element in the example above, defines an action to take place when the user clicks on the document.

Functions

The ChangeColor() function in the example above, is a JavaScript function. The function will be triggered (started) when a user clicks on the HTML document.

Changing Style

The HTML DOM also defines a model for changing the styles of HTML objects. The coding example below shows how to obtain the same effect as the first example, by changing the style of the body object:

<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.style.background="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>

The Text Object

The Text object represents a text field in an HTML form. For each instance of an <input type="text"> tag in an HTML form, a Text object is created. You can access a Text object by indexing the elements array (by number or name) of the corresponding form or by using getElementById().

Text Object Properties

Property / Description
accept / Sets or returns a list of content types, which the server processing this form will handle correctly
accessKey / Sets or returns the keyboard key to access the text field
align / Sets or returns the alignment of the text field according to the surrounding text
alt / Sets or returns an alternate text to display if the browser does not support text fields
defaultValue / Sets or returns the initial value of the text field
disabled / Sets or returns whether or not the text field should be disabled
form / Returns a reference to the text field's parent form
id / Sets or returns the id of the text field (In IE 4 this property is read-only)
maxLength / Sets or returns the maximum number of characters in the text field
name / Sets or returns the name of the text field
readOnly / Sets or returns whether or not the text field should be read-only
size / Sets or returns the size of the text field
tabIndex / Sets or returns the tab order for the text field
type / Returns the type of the form element. For a text object it will always be "text"
value / Sets or returns the value of the value attribute of the text field

Text Object Methods

Method / Description
blur() / Removes focus from the text field
click() / Simulates a mouse-click in the text field
focus() / Sets focus on the text field
select() / Selects the content of the text field

Text Object Events

Syntax: object.event_name="someJavaScriptCode"

Event / Description
onBlur / Executes some code when the text field loses focus
onChange / Executes some code when the text field loses focus and its value has altered
onClick / Executes some code when the user clicks the left mouse button in the text field
onFocus / Executes some code when the text field gets focus
onKeyDown / Executes some code when a key is pressed in the text field
onKeyPress / Executes some code when an alphanumeric key is pressed in the text field
onKeyUp / Executes some code when a key is released in the text field
onSelect / Executes some code when the current selection is changed in the text field
onSelectStart / Executes some code when some text in the text field is selected

The Button Object

The Button object represents a button in an HTML form. For each instance of an <input type="button"> tag in an HTML form, a Button object is created. You can access a Button object by indexing the elements array (by number or name) of the corresponding form or by using getElementById().

Button Object Properties

Property / Description
accessKey / Sets or returns the keyboard key to access the button
disabled / Sets or returns whether or not the button should be disabled
form / Returns a reference to the form that contains the button
id / Sets or returns the id of the button
name / Sets or returns the name of the button
tabIndex / Sets or returns the index that defines the tab order for the button
type / Returns the type of the form element. For a Button object it will be "button"
value / Sets or returns the text that is displayed on the button

Button Object Methods

Method / Description
blur() / Removes focus from the button
click() / Simulates a mouse-click on the button
focus() / Gives focus to the button

Button Objects Events

Syntax: object.event_name="someJavaScriptCode"

Event / Description
onBlur / Executes some code when the button loses focus
onClick / Executes some code when the button is clicked
onFocus / Executes some code when the button gets focus
onMouseDown / Executes some code when a mouse button is pressed
onMouseUp / Executes some code when a mouse button is released

1