HTML DOM Examples

Examples of HTML DOM objects accessed and manipulated using JavaScript.

Document Object

• Output text using document.write()
• Output HTML using document.write()
• Return the number of anchors in the document
• Return the innerHTML of the first anchor in the document
• Return the number of forms in the document
• Return the name of the first form in the document
• Return the number of images in the document
• Return the ID of the first image in the document
• Return the number of links in the document
• Return the ID of the first link in the document
• Return all cookies' name/value pairs in the document
• Return the server domain name of the loaded document
• Return the last modification time of the document
• Return the URL of the currently loaded document
• Return the title of the document
• Return the full URL of the document
• Open an output stream and input text into it
• Difference between write() and writeln()
• Pop out the innerHTML of an element with a specified ID
• Pop out the number of elements with a specified name
• Pop out the number of elements with a specified tag name
• For more examples of the Document object, see our JavaScript Reference Manual.

Anchor Object

• Return and set the charset attribute of a link
• Return and set the href attribute of a link
• Return and set the hreflang attribute of a link
• Return the name of an anchor
• Return the relationship between the current file and the linked document
• Change the target attribute of a link
• Return the value of the type attribute of a link More examples of Anchor objects can be found in our JavaScript Reference Manual.

Area Object

• Return the alternative text for a specific area in an image map
• Return the coordinates of a specific area in an image map
• Return the anchor part of the href attribute for an area
• Return the hostname and port of a specific area in an image map
• Return the hostname of a specific area in an image map
• Return the port of a specific area in an image map
• Return the href of a specific area in an image map
• Return the pathname of a specific area in an image map
• Return the protocol of a specific area in an image map
• Return the querystring part of the href attribute for an area
• Return the shape of a specific area in an image map
• Return the target value of a specific area in an image map

More examples of Area objects can be found in our JavaScript Reference Manual.

Base Object

• Return the base URL for all relative URLs on the page
• Return the base target for all relative links on the page

More examples of Base objects can be found in our JavaScript Reference Manual.

Button Object

• Disable a button after it is clicked
• Return the name of a button
• Return the type of a button
• Return the value of a button
• Return the ID of the form a button belongs to

More Button object examples can be found in our JavaScript Reference Manual.

Form Object

• Return the values of all elements in a form
• Return the value of the acceptCharset attribute of a form
• Return the value of the action attribute of a form
• Return the value of the enctype attribute in a form
• Return the number of elements in a form
• Return the method used to submit form data
• Return the name of a form
• Return the value of a form's target attribute
• Reset a form
• Submit a form
• More Button object examples in our JavaScript Reference Manual

Frame/IFrame Object

• Align an iframe
• Change the background color of a document contained in an iframe
• Return the value of the frameborder attribute in an iframe
• Remove the frameborder of an iframe
• Change the height and width of an iframe
• Return the value of the longdesc attribute in an iframe
• Return the value of the marginheight attribute in an iframe
• Return the value of the marginwidth attribute in an iframe
• Return the value of the name attribute in an iframe
• Return and set the value of the scrolling attribute in an iframe
• Change the src of an iframe
• More Frame/IFrame object examples in our JavaScript Reference Manual

Image Object

• Align an image
• Return the alternative text of an image
• Add a border to an image
• Change the height and width of an image
• Set the hspace and vspace attributes of an image
• Return the value of the longdesc attribute of an image
• Create a link to a low-resolution image
• Return the name of an image
• Change the src of an image
• Return the value of the usemap attribute of a client-side image map
• More Image object examples in our JavaScript Reference Manual

Event Object

• Which mouse button was clicked?

• Keycode of the pressed keyboard key?

• Coordinates of the mouse?

• Coordinates of the mouse relative to the screen?

• Is the shift key pressed?

• Which element was clicked?

• What event occurred?

Option and Select Objects

• Disable and enable dropdown list

• Get the ID of the form containing the dropdown list

• Get the number of options in the dropdown list

• Make the dropdown list multi-line

• Select multiple options in the dropdown list

• Pop out all options in the dropdown list

• Pop out the index of the selected option in the dropdown list

• Change the text of the selected option in the dropdown list

• Remove an option from the dropdown list

Table, TableHeader, TableRow, TableData Objects

• Change the width of the table border

• Change the cellpadding and cellspacing of the table

• Specify the frame of the table

• Specify the rules for the table

• The innerHTML of a row

• The innerHTML of a cell

• Create a caption for the table

• Delete a row from the table

• Add a row to the table

• Add a cell to a table row

• Align cell content horizontally

• Align cell content vertically

• Align content horizontally in a single cell

• Align content vertically in a single cell

• Change the content of a cell Change the Number of Columns a Cell Spans (colspan Attribute)