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