Friday, January 2, 2009

HTML DOM Tutorial



The HTML DOM is the Document Object Model for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

The HTML DOM views HTML documents as a tree structure of elements. All elements, along with their text and attributes, can be accessed and manipulated through the DOM tree.

Start learning the HTML DOM now!

HTML DOM
DOM HOME
DOM Intro
DOM How To
DOM Reference
DOM Summary

DOM Examples
DOM Examples

DOM Objects
DOM Anchor
DOM Applet
DOM Area
DOM Base
DOM Basefont
DOM Body
DOM Document
DOM Event
DOM Form
DOM Frame
DOM Frameset
DOM History
DOM Iframe
DOM Image
DOM Input Button
DOM Input Checkbox
DOM Input File
DOM Input Hidden
DOM Input Password
DOM Input Radio
DOM Input Reset
DOM Input Submit
DOM Input Text
DOM Link
DOM Location
DOM Meta
DOM Navigator
DOM Object
DOM Option
DOM Screen
DOM Select
DOM Style
DOM Table
DOM TableData
DOM TableHeader
DOM TableRow
DOM Textarea
DOM Window

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents.


What You Should Already Know

Before you continue you should have a basic understanding of the following:

  • HTML / XHTML
  • JavaScript

If you want to study these subjects first, find the tutorials on our Home page.


What is the DOM?

"The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM provides a standard set of objects for representing HTML and XML documents, and a standard interface for accessing and manipulating them.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

  • Core DOM - defines a standard set of objects for any structured document
  • XML DOM - defines a standard set of objects for XML documents
  • HTML DOM - defines a standard set of objects for HTML documents

You can read more about the W3C DOM specifications / levels in our W3C tutorial.


What is the HTML DOM?

  • The HTML DOM is the Document Object Model for HTML
  • The HTML DOM is platform and language independent
  • The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents
  • The HTML DOM is a W3C standard

The HTML 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 elements, their text, and their attributes are all known as nodes.


We Will Use JavaScript

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

In this tutorial we will use JavaScript.


An HTML DOM Example

This coding example shows how the background color of an HTML document can be changed to yellow when a user clicks on it:

 
 
Click on this document!
 

Try it yourself

The example above is explained in details in the next chapter of this tutorial.


The HTML DOM defines an HTML document as a collection of objects.

Objects have properties and methods. Objects can respond to events.


An HTML DOM Example

This coding example shows how the background color of an HTML document can be changed to yellow when a user clicks on it:

 
 
Click on this document!
 

Try it yourself


Document Objects

The HTML DOM defines HTML documents as a collection of objects.

The document object is the parent of all the other objects in an HTML document.

The document.body object represents the 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.


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 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:

 
 
Click on this document!
 

Try it yourself

HTML DOM Objects

Follow the links to learn more about the objects and their collections, properties, methods and events.

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 tag on an HTML form, a Button object is created

Checkbox

Represents a checkbox on an HTML form. For each instance of an HTML 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 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 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 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

Password

Represents a password field on an HTML form. For each instance of an HTML tag on a form, a Password object is created

Radio

Represents radio buttons on an HTML form. For each instance of an HTML tag on a form, a Radio object is created

Reset

Represents a reset button on an HTML form. For each instance of an HTML 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

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 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 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 or tag


HTML DOM Summary

This tutorial has taught you how to use the HTML DOM to make your web site more dynamic and interactive.

You have learned how manipulate HTML elements in response of different scenarios.

For more information on HTML DOM, please look at our HTML DOM examples and our HTML DOM reference.


Now You Know HTML DOM, What's Next?

The next step is to learn about ASP.

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our ASP tutorial.

Anchor Object

Change text, URL, and target attribute of a link
Using focus() and blur()
Add an accessKey to a link

Document Object

Write text to the output
Write text with formatting to the output
Return the title of a document
Return the URL of a document
Return the referrer of a document
Return the domain name of the document's server
Use getElementById()
Use getElementsByName()
Open a new document, specify MIME type and add some text
Return the number of anchors in a document
Return the innerHTML of the first anchor in a document
Count the number of forms in a document
Access an item in a collection
Count the number of images in a document

Event Object

Which mouse button was clicked?
What are the coordinates of the cursor?
What is the unicode of the key pressed?
What are the coordinates of the cursor, relative to the screen?
What are the coordinates of the cursor?
Was the shift key pressed?
Which element was clicked?
Which eventype occured?

Form and Form Input Objects

View and change the action URL of a form
View the method that is to be used when sending form data
Alert id, type, and value of a Button object + disable button
Check and uncheck a checkbox
Checkboxes in a form
Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase.
Radio buttons
Reset a form
Submit a form
Form validation
Set focus to an input field when the page loads
Select the content of an input field
Dropdown list in a form
Another dropdown list
A dropdown menu
Jump to the next field when the current field's maxlength has been reached
Add accessKeys to form fields

Frame, Frameset, and IFrame Objects

Resizable and not resizable frames
Frames with and without scrollbars
Change the source / URL of two frames
Break out of a frame
Update two iframes

Image Object

Change the height and width of an image
Change the src of an image

Location Object

Send the client to a new location / URL
Reload a page
Break out of a frame
Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.

Navigator Object

Detect the visitor's browser and browser version
More details about the visitor's browser
All details about the visitor's browser
Alert user, depending on browser

Option and Select Objects

Disable and enable a dropdown list
Get the id of the form that contains the dropdown list
Get the number of options in the dropdown list
Turn the dropdown list into a multiline list
Select multiple options in a dropdown list
Alert the selected option in a dropdown list
Alert the index of the selected option in a dropdown list
Change the text of the selected option
Remove options from a dropdown list

Screen Object

Detect details about the client's screen

Table, TableHeader, TableRow, TableData Objects

Change the width of a table border
Change the cellPadding and cellSpacing of a table
Specify frames of a table
Specify rules for a table
InnerHTML of a row
InnerHTML of a cell
Create a caption for a table
Delete rows in a table
Add rows to a table
Add cells to a table row
Align the cell content in a table row
Vertical align the cell content in a table row
Align the cell content in a single cell
Vertical align the cell content in a single cell
Change the content of a table cell
Change the colspan of a table row

Window Object

Display an alert box
Alert box with line-breaks
Display a confirm box
Display a prompt box
Open a new window when clicking on a button
Open a new window and control its appearance
Open multiple windows with one click
Send the client to a new location / URL
Reload a page
Write some text in the windows status bar
Print a page
Break out of a frame
Resize a window
Resize a window to a specified size
Scroll the window
Scroll the window to a specified position
Simple timing
Another simple timing
Timing event in an infinite loop
Timing event in an infinite loop - with a Stop button
A clock created with a timing event
Create a pop-up

Search

My Blog List