The Document Object Model is a standard way in which web browsers represent HMTL and XML documents that will allow programs and scripts to dynamically access and update the content, structure and style of documents. In this discussion, we will basic learning HTML with sub topic Document Object Model, also know as DOM.

The history of the Document Object Model is intertwined with history of the browser wars of the late 1990s between Netscape Navigator and Microsoft Internet Explorer, as well as with that of JavaScript and JScript, the first scripting languages to be widely implemented in the layout engines of web browsers.

With Document Object Model, a program or JavaScript become a powerful for making pages dynamic with combination of HTML, Style Sheets and Script. Next discussion, we will discuss how to access and manipulate HTML document with JavaScript via Document Object Model. The Document Object Model are organized into a tree like structure and represent all of the content and components of a web document, with top of hierarchy is window.

As an example in this discussion, we will access properties of document with Document Object model using JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
<html>
 
<head>
<title>Test Document</title>
</head>
 
<body>
<a href="#" onclick="document.getElementById('mydiv').style.display='block';return false;">Click me!</a>
	<div id="mydiv" style="display: none;">
		hidden text or content until the link is clicked.
	</div>
</body>
</html>

In next example, we’ll access browser history with Document Object Model. For detail, see following example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
<html>
 
<head>
<title>Test Document</title>
</head>
 
<body>
	<input type=”button”
onClick=”history.back();” value=”<-- Back”>
 
<input type=”button”
onClick=”history.forward();” value=”Forward -->”>
</body>
</html>

The history object has three methods we can use to move through the history list:

history.go() opens a URL from the history list. To use this method, specify a
positive or negative number in parentheses. For example, history.go(-2) is
equivalent to clicking the Back button twice.

history.back() loads the previous URL in the history list—equivalent to
clicking the Back button.

history.forward() loads the next URL in the history list, if available. This is
equivalent to clicking the Forward button.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • Slashdot
  • Technorati
  • YahooMyWeb