The HTML DOM defines a standard way to access and manipulate HTML documents by treating them as a tree structure consisting of objects. The HTML DOM views an HTML document as a tree of objects like the document object, body object, heading objects, paragraph objects, etc. that can be manipulated using JavaScript.
Copyright:
Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online from Scribd
The HTML DOM defines a standard way to access and manipulate HTML documents by treating them as a tree structure consisting of objects. The HTML DOM views an HTML document as a tree of objects like the document object, body object, heading objects, paragraph objects, etc. that can be manipulated using JavaScript.
The HTML DOM defines a standard way to access and manipulate HTML documents by treating them as a tree structure consisting of objects. The HTML DOM views an HTML document as a tree of objects like the document object, body object, heading objects, paragraph objects, etc. that can be manipulated using JavaScript.
Copyright:
Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online from Scribd
The HTML DOM defines a standard way to access and manipulate HTML documents by treating them as a tree structure consisting of objects. The HTML DOM views an HTML document as a tree of objects like the document object, body object, heading objects, paragraph objects, etc. that can be manipulated using JavaScript.
Copyright:
Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online from Scribd
Download as doc, pdf, or txt
You are on page 1/ 11
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:
<html>
<head> <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } </script> </head>
<body onclick="ChangeColor()"> Click on this document! </body>
</html> 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:
<html>
<head> <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } </script> </head>
<body onclick="ChangeColor()"> Click on this document! </body>
</html>
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 <body> 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 <body> 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:
<html>
<head> <script type="text/javascript"> function ChangeColor() { document.body.style.background="yellow" } </script> </head>
<body onclick="ChangeColor()"> Click on this document! </body> </html>
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 <input type="button"> tag on an HTML form, a Button object is created Checkbox Represents a checkbox on an HTML form. For each instance of an HTML <input type="checkbox"> 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 <input type="file"> 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 <input type="hidden"> 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 <head> 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 <option> 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 <input type="password"> tag on a form, a Password object is created Radio Represents radio buttons on an HTML form. For each instance of an HTML <input type="radio"> tag on a form, a Radio object is created Reset Represents a reset button on an HTML form. For each instance of an HTML <input type="reset"> 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 <select> 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 <input type="submit"> 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 <input type="text"> 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 <body> or <frameset> 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
