JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 12: Document Object


The Document object in JavaScript is one of the most commonly used objects. The main purpose of the document object is to write something to the web page or more appropriately is to display text content in a web page. The document object also holds all the information contains in a web page, such as its background color, its title, the date the web page was last modified and more.

Document object has properties and methods. The properties are shown in Table 12.1.

Table 12.1 Document Properties

Properties Description
bgColor Specifies the background color of the webpage.
fgColor Specifies the background color of the webpage.
title Displays the title of the web page.
location Displays URL of the document
lastModified The date the web page was last modified.
linkColor Hyperlink color of a web page in hexadecimal value
vlinkcolor Visited hyperlink color of a web page in hexadecimal value
alinkcolor Activated hyperlink color (when the button is pressed and before releasing it) of a web page.
links.length Number of links in a web page.

12.2 Document Methods

Other than the properties, there are also a number of methods that are associated with the document object. The methods allow the document object to perform some operations. The methods are listed in Table 12.2.

Table 12.1 Document Methods
Method Description
write("text") Display text  or string in the current window
writeln("text") Display text or string in the current window and adds a line after the end of the text.
Clears( ) Clear the window
Close( ) Closes the window

For example, if you wish to specify the background of the web page, you can use document.bgcolor="red"  or use the color code   document.bgcolor="#ff0000" If you wish to specify the title of the web page, you can use document.title="My Title" If you wish to specify the color of the hyperlinks in a web page, you can use document.linkColor="Cyan" Let's look at the actual application in a web page, as shown in Example 12.1.

Example 12.1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Document Object</title>
</head>
<body bgcolor="#00FFFF">
<a href="http://javascript-tutor.net/">JavaScript Tutorial</a>
<br>
<a href="http://www.htmltutor.org/">HTML Tutorial</a>

<hr>
<script>
document.bgColor = "cyan";
document.linkColor="Magenta";
document.write("This web page title is : "+document.title);
document.write("<br>This web page backgroud color code is: "+document.bgColor);
document.write("<br>The URL of the web page is: "+document.location);
document.write("<br>This web page was last modified at : "+document.lastModified);
document.write("<br>The hyperlink color code of this web page is : "+document.linkColor);
document.write("<br>The visited hyperlink color code of this web page is : "+document.vlinkColor);
document.write("<br>The active hyperlink color code of this web page is : "+document.alinkColor);
document.write("<br>The number of hyperlinks of this web page is : "+document.links.length);
document.clear;

</script>

</body>
Click Example 12.1 to see the output.


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy