<Lesson 11> [Contents] <Lesson 13>
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
This webpage title is: Document Object
This webpage background color code is: #00ffff
The URL of the webpage is: http://javascript-tutor.net/java_tutor/Javascrpt_Example12.1.htm
This webpage 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.