JavaScript HTML DOM Examples
Examples of using JavaScript to access and manipulate the HTML DOM objects.
Document Object
Write text to the output
Write text with formatting to the output
Return the number of anchors in a document
Return the innerHTML of the first anchor in a document
Return the number of forms in a document
Return the name of the first form in a document
Return the number of images in a document
Return the id of the first image in a document
Return the number of links in a document
Return the id of the first link in a document
Return all name/value pairs of cookies in a document
Return the domain name of the server that loaded the document
Return the date and time the document was last modified
Return the URL of the document that loaded the current document
Return the title of a document
Return the full URL of a document
Open an output stream, add some text, then close
Open an output stream (in a new window), add some text, then close
Alert innerHTML of an element with a specific ID
Alert the number of elements with a specific name
Alert the number of elements with a specific tagname
Anchor Object
Change text, URL, and target attribute of a link
Using focus() and blur()
Add an accessKey to a link
Event Object
Which mouse button was clicked?
What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which element was clicked?
Which event type
occurred?
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
All details about the visitor's 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
All
details about the visitor'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
Start Creating a stunning, Flash website. It's easy and free!
Wix is a revolutionary web design tool that provides you with a free, simple,
drag & drop editing platform to create your own professional and beautiful website.
Over 2 Million users have created their website with Wix.
Now create yours!
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
