JavaScript DOM Examples

These examples use JavaScript to access and manipulate HTML DOM objects.

Note: Most of the examples require IE 4.0+, Netscape 7+, or Opera 7+!

Anchor Object

Change URL and text of a hyperlink
Change the target attribute of a link
Using focus() and blur()
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 pressed in the first window, the onClick event handler sets win2.location.hash to the specified anchor name.

Button Object

Create a button
Click on a button and display the name of the form
Click on a button and display the names of all the elements in a form

Checkbox Object

Check and uncheck a checkbox
Checkboxes in a form
Checkbox
Two text boxes and one checkbox. If the user clicks in the checkbox all text fields are converted to uppercase.

Document Object

Write text to the output
Write text with formatting to the output
Return the number of anchors in a document
Return the domain name of the document's server
Return the referrer of a document
Return the title of a document
Return the URL oEdit the text abovef a document
Return a specified element, using getElementById()
Return the number of elements with equal names, using getElementsByName()
Open a new document and add some text
Open a new document specifying mime type and replace
Count forms in a document
Count images in a document
Access an item in a collection

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 Object

View and change the action URL of a form
Return the method used when sending form data
Reset the fields in a form
Submitting a form
Validate an e-mail address in a form
Validate an input field with minimum and maximum values
Validate an input field with a maximum number of characters
Form validation
Set focus to an input field
Select the content of an input field
Radio buttons in a form
Checkboxes in a form
Dropdown list in a form
Another dropdown list
A select-menu in a form
Jump to the next field when the current field's maxlength has been reached

Frame, Frameset, and IFrame Objects

Make the frames resizable and not resizable
Frames with and without scrollbars
Change the source of frames
Break out of a frame
Update two frames
Update two other frames
Update two iframes

Image Object

Change the height of an image
Change image
Change the width of an image

Location Object

Send the client to a new location (URL/page)
Refresh a document

Navigator Object

How to detect the client's browser
More details about the client's browser
All details about the client's browser
Redirect user depending on browser
Different messages depending on browser

Option and Select Objects

Disable and enable a dropdown list
Return the name of the form that contains the dropdown list
Return the number of options in the dropdown list
Change the size of a dropdown list
Select multiple options in a dropdown list
Return the selected option as text
Return the selected option as a number
Change the option text
Remove an option from a dropdown list

Screen Object

Detect details about the client's screen

Table Object

Change the width of a table border
Change the cellPadding and cellSpacing of a table
Specify frames of a table