Html Dom Tutorial

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: <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } 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: <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } 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: <script type="text/javascript"> function ChangeColor() { document.body.style.background="yellow" } 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 Anchor Applet Area Base Basefont Body Button

Checkbox

Document Event

FileUpload Form Frame Frameset Hidden

History

Description Represents an HTML a element (a hyperlink) Represents an HTML applet element. The applet element is used to place executable content on a page Represents an area of an image-map. An image-map is an image with clickable regions Represents an HTML base element Represents an HTML basefont element Represents the body of the document (the HTML body) Represents a push button on an HTML form. For each instance of an HTML tag on an HTML form, a Button object is created Represents a checkbox on an HTML form. For each instance of an HTML tag on an HTML form, a Checkbox object is created Used to access all elements in a page 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 For each instance of an HTML tag on a form, a FileUpload object is created Forms are used to prompt users for input. Represents an HTML form element Represents an HTML frame Represents an HTML frameset Represents a hidden field on an HTML form. For each instance of an HTML tag on a form, a Hidden object is created 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

Iframe Image Link Location Meta Navigator Option

Password

Radio

Reset

Screen Select Style

Submit

Table TableData TableHeader TableRow Text Textarea Window

browser window Represents an HTML inline-frame Represents an HTML img element Represents an HTML link element. The link element can only be used within the tag Contains information about the current URL Represents an HTML meta element Contains information about the client browser 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 Represents a password field on an HTML form. For each instance of an HTML tag on a form, a Password object is created Represents radio buttons on an HTML form. For each instance of an HTML tag on a form, a Radio object is created Represents a reset button on an HTML form. For each instance of an HTML tag on a form, a Reset object is created Automatically created by the JavaScript runtime engine and it contains information about the client's display screen Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied Represents a submit button on an HTML form. For each instance of an HTML tag on a form, a Submit object is created Represents an HTML table element Represents an HTML td element Represents an HTML th element Represents an HTML tr element Represents a text field on an HTML form. For each instance of an HTML tag on a form, a Text object is created Represents an HTML textarea element 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