HTML Faq's - HTML Interview Questions And Answer

HTML DOM Tutorial

2009-01-02T02:10:00.000-08:00

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:

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:

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:

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	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 tag on an HTML form, a Button object is created
Checkbox	Represents a checkbox on an HTML form. For each instance of an HTML 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 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 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 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
Password	Represents a password field on an HTML form. For each instance of an HTML tag on a form, a Password object is created
Radio	Represents radio buttons on an HTML form. For each instance of an HTML tag on a form, a Radio object is created
Reset	Represents a reset button on an HTML form. For each instance of an HTML 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
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 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 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 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

exercises 2

2008-12-11T07:04:00.001-08:00

1. Modify the IQTravel_3a.html document by adding a hyperlink near the end of the document. Place the following sentence: "Find out more about one of our favorite islands." in the document where the darker type is the clickable portion. Locate a "home page" for some island of your choice on the internet and make that the target of the hyperlink.
exercise 1
3. If you have access to a printer, print out the document from the previous exercise. Print the original version of the same document and compare.
New version: Find out more about one of our

favorite islands, or visit the

Web-Archipelago site, just one of the places where you
can gain more information about other island adventures.
Old version: Visit the
Web-Archipelago site, one of the places where you
can gain more information about other island adventures.

5. Locate a site containing small icons (you can start from the Web-Archipelago site) and find an appropriate arrow icon that you can use to take you back to the top of the page as in the previous exercise. Turn the icon into an explicitly-anchored hyperlink to take you to the top of the page in the IQTravel_3b.html Web document. Try the use of the BORDER attribute to see the effect.
exercise 5--with borders exercise 5--without borders
7. Modify the townMap.html document to provide for a default region in which mouse clicks will result in a link to a document (just create a simple test one) whose name is neighborhoods.html.
exercise 7
Some browsers may not support the default region in client-side image maps.
Longer Voyage Exercises
9. Start with the townMap.html document and use the coordinates of the clickable regions associated with Brent's Restaurant and the Cowboy Museum in the following way. Suppose the street from the corner on which Brent's Restaurant is located to the corner on which the Cowboy Museum is located is known as Stevens Creek Plaza. In the client-side image map implementation create a narrow rectangular area that contains this street. When the user clicks in this region, link to a test document called plaza.html. Make sure your implementation works correctly. In particular, let clicks in the restaurant and museum have precedence over the plaza.
exercise 9
11. In the previous exercise, use small icons to identify each list item and make the icon the active element to click.Exercise #2:In this exercise you will develop an HTML notebook where you can keep track of useful Web sites containing material that you can use for your HTML documents.
(a) Create a table of contents at the beginning of the document (use an ordered list):1. HTML language elements2. Images and textures3. Graphical elements4. Useful techniques
[Language elements should be about tag syntax and other things that will help you quickly locate material you need for Web development. Images and textures are either sites where you can get image elements that you can use as background images or links to images themselves that you may have downloaded and placed in a graphics directory. Graphical elements are sites containing collections of things like small icons or perhaps icons themselves that you have downloaded and placed in an icon directory. Useful techniques should be links to sites that contain information about things like forms or interesting techniques for doing interesting things that you might want to use someday.]
(b) Make these topics hyperlinks to explicit anchors within the notebook document.
(c) In each of the sections provide a list of items containing links to locations relating to that topic. Provide a few lines that will tell you what's at the other end of the hyperlink.
HTML notebookNote: to check if the explicit anchors work, make your browser window small
13. Download the image: stonehenge.gif from the textBook graphics area of the Web-Archipelago. The following figure identifies certain key points in terms of their pixel coordinates relative to the upper left corner of the image.1: (198, 133) 2: (201, 180) 3: (214, 183) 4: (216, 133) 5: (132, 37) 6: (138, 65)7: (230, 68) 8: (274, 58) 9: (374, 54) 10: (374, 26) 11: (211, 22)
We'll create a clickable image such as one might use in a computer game. We want to let the region marked by the four points 1 - 4 be a portal into another realm of the game. The dark horizontal stone resting atop the others and marked by the points 5 - 11 is a lethal area. Users who click here will perish. Clicking anywhere else in the image will leave users in a lost state.
First set up a directory called mystery in which you will place four HTML documents:(a) an HTML document that will contain the stonehenge picture. Above picture place the following text as a level 1 header (centered):
Mystery jumpBelow the picture, center the following text:
Click in the picture and hyperlink into the mystery.Beware of the hidden danger!
(b) an HTML document (perish.html) that is completely black except for white text (centered---level 1 header)
You have perished
(c) an HTML document (realm.html) that is completely white with red text (centered---level 1 header)
Enter into the realm
(d) an HTML document (lost.html) that is gray with black text (centered---level 1 header)
You are lost
Create a client-side clickable image from this image and create links so that users who click in the portal area go to the realm document. Those who click on the dangerous stone go to the perish document and all other clicks go to the lost document.

exercises

2008-12-11T07:03:00.000-08:00

Exercises
1. Start with the HTML document: simple.html and modify it so that the title is "My home page". Replace the "Hello, WWW World." string with an appropriate greeting for you.
exercise 1
3. Change the header tags in the file IQTravel_2c.html so that the first header ("Island Quest Travel") is rendered using the H1 tag and each of the services headers are rendered using the H2 tag.
exercise 3
5. Modify the IQTravel_2d.html file using an ordered list instead of an unordered list for the list of services. Look up the OL tag in Appendix 1 and use uppercase roman numbering.
exercise 5
7. Find a Web site where graphical icons are available for free downloading. Locate an icon to represent the "under construction" sign you might see along the highway. Place it in the simple.html file so that it is centered at the top of the page.
exercise 7
9. Find a location on the Web that has small images that can be used for texture and replace the background image in IQTravel_2g.html. Try to find a texture appropriate to the theme of the Island Quest Travel customer.
exercise 9
11. Modify IQTravel_2h.html to add an appropriate META tag to supply keywords to a visiting search engine.
exercise 11
Longer Voyage Exercises
13. Browsers are designed to ignore tags that they don't understand and to try to make reasonable choices when you forget certain items. Try starting with the simple.html file and try the following:
leave off the HTML tag and its companion closing tag.
put the HTML tags back in and leave out the closing /TITLE tag.
put the /TITLE tag back in and leave out the opening and closing BODY tags.
put the opening BODY tag back in but leave out the /BODY tag. Report your findings.
exercise 13 (a)
exercise 13 (b)
exercise 13 (c)
exercise 13 (d)
15. In the IQTravel_2b.html file replace all occurrences of

by

. Is there any difference in the document viewed in the browser?
exercise 15
17. How would you modify the IQTravel_2d.html file to make each letter of the main title header a different color?
exercise 17
19. Start with the IQTravel_2f.html file and modify it so that the text "Island Quest Travel" that appears in italics at the beginning of the document appears two font sizes larger and in red. Note the design flaw having the font in the logo be different than the font in the text. This would have to be corrected by having the appropriate font used in the creation of the logo image.
exercise 19
21. Change the background color of the IQTravel_2f.html file to "teal". How would you fix the document to make it readable?
exercise 21
23. If you have access to graphical tools, try to put together the home page for a Web site for a small business (fictitious or otherwise) in your city or town (a toy store would be a fun site). See if you can place all the information in about one screenful as viewed in the browser. In the next chapter we will see how to link documents so, for now, plan on leaving lower level details to other pages. See if you locate free graphical elements on the Web that you have permission to use and download them to your hard drive. Work with the placement of graphical elements and text to make it easy for viewers to locate the information they are looking for.
exercise 23

HTML 4.0 Standard Attributes

2008-11-15T21:12:00.002-08:00

HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Attribute	Value	Description
class	class_rule or style_rule	The class of the element
id	id_name	A unique id for the element
style	style_definition	An inline style definition
title	tooltip_text	A text to display in a tool tip

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute	Value	Description
dir	ltr \| rtl	Sets the text direction
lang	language_code	Sets the language code

Keyboard Attributes

Attribute	Value	Description
accesskey	character	Sets a keyboard shortcut to access an element
tabindex	number	Sets the tab order of an element

HTML 4.0 Event Attributes

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.

If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events

Only valid in body and frameset elements.

Attribute	Value	Description
onload	script	Script to be run when a document loads
onunload	script	Script to be run when a document unloads

Form Element Events

Only valid in form elements.

Attribute	Value	Description
onchange	script	Script to be run when the element changes
onsubmit	script	Script to be run when the form is submitted
onreset	script	Script to be run when the form is reset
onselect	script	Script to be run when the element is selected
onblur	script	Script to be run when the element loses focus
onfocus	script	Script to be run when the element gets focus

Keyboard Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute	Value	Description
onkeydown	script	What to do when key is pressed
onkeypress	script	What to do when key is pressed and released
onkeyup	script	What to do when key is released

Mouse Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.

Attribute	Value	Description
onclick	script	What to do on a mouse click
ondblclick	script	What to do on a mouse double-click
onmousedown	script	What to do when mouse button is pressed
onmousemove	script	What to do when mouse pointer moves
onmouseout	script	What to do when mouse pointer moves out of an element
onmouseover	script	What to do when mouse pointer moves over an element
onmouseup	script	What to do when mouse button is released

HTML Scripts

2008-11-15T21:12:00.001-08:00

Add scripts to HTML pages to make them more dynamic and interactive.

Examples

Insert a script
This example demonstrates how to insert a script into your HTML document.

Work with browsers that do not support scripts
This example demonstrates how to handle browsers that do not support scripting.

Insert a Script into HTML Page

A script in HTML is defined with the

The script above will produce this output:

Hello World!

Note: To learn more about scripting in HTML, visit our JavaScript School.

How to Handle Older Browsers

A browser that does not recognize the

VBScript:

The

VBScript:

Script Tags

Tag	Description