JavaScript Lesson 12: Document Object

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

<Previous Lesson> [Table of Contents] <Next Lesson>

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 the following table:




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 below:

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>

The output is

JavaScript Tutorial

HTML Tutorial


This web page title is : Document Object
This web page background color code is: #00ffff
The URL of the web page is: http://javascript-tutor.net/java_tutor/Javascrpt_Example12.1.htm
This web page was last modified at : 03/19/2011 08:23:51
The hyperlink color code of this web page is : #ff00ff
The visited hyperlink color code of this web page is : #800080
The active hyperlink color code of this web page is : #0000ff
The number of hyperlinks of this web page is : 2

Click Example 12.1 to see the actual output.



<Previous Lesson> [Table of Contents] <Next Lesson>

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone