InformIT: Sams Teach Yourself JavaScript in 24 Hours

Working with Web Documents

The document object represents a Web document, or page. Web documents are displayed within browser windows, so it shouldn't surprise you to learn that the document object is a child of the window object.

Because the window object always represents the current window (the one containing the script), you can use window.document to refer to the current document. You can also simply refer to document, which automatically refers to the current window.

If multiple windows or frames are in use, there might be several window objects, each with its own document object. To use one of these document objects, you use the name of the window and the name of the document.

In the following sections, you will look at some of the properties and methods of the document object that will be useful in your scripting.

Getting Information About the Document

Several properties of the document object include information about the current document in general:

document.URL specifies the document's URL. This is a simple text field. You can't change this property. If you need to send the user to a different location, use the window.location object, described later in this hour.
document.title lists the title of the current page, defined by the HTML <title> tag.
document.referrer is the URL of the page the user was viewing prior to the current page—usually, the page with a link to the current page.
document.lastModified is the date the document was last modified. This date is sent from the server along with the page.
document.bgColor and document.fgColor are the background and foreground (text) colors for the document, corresponding to the BGCOLOR and TEXT attributes of the <body> tag.
document.linkColor, document.alinkColor, and document.vlinkColor are the colors for links within the document. These correspond to the LINK, ALINK, and VLINK attributes of the <body> tag.
document.cookie allows you to read or set a cookie for the document. See Hour 24, "JavaScript Tips and Tricks", for information about cookies.

As an example of a document property, Listing 9.1 shows a short HTML document that displays its last modified date using JavaScript.

Example 9.1. Displaying the last modified date

<html><head><title>Test Document</title></head>
<body>
<p>This page was last modified on:
<script language="JavaScript" type="text/javascript">
document.write(document.lastModified);
</script>
</p><br>
</html>

This can tell the user when the page was last changed. If you use JavaScript, you don't have to remember to update the date each time you modify the page. (You could also use the script to always print the current date, but that would be cheating.)

Writing Text in a Document

The simplest document object methods are also the ones you will use most often. In fact, you've used one of them already. The document.write method prints text as part of the HTML page in a document window. This statement is used whenever you need to include output in a Web page.

An alternative statement, document.writeln, also prints text, but it also includes a newline (\n) character at the end. This is handy when you want your text to be the last thing on the line.

You can use these methods only within the body of the Web page, so they will be executed when the page loads. You can't use these methods to add to a page that has already loaded without reloading it. You can write new content for a document, however, as the next section explains.

The document.write method can be used within a <script> tag in the body of an HTML document. You can also use it in a function, provided you include a call to the function within the body of the document.

Clearing and Rewriting Documents

The document object includes open and close methods. These methods don't actually open and close new documents or windows. Instead, the open method opens a stream, which clears the document and allows you to create a new one with the write or writeln methods.

When you use the document.open method, the current document is cleared. Any data already displayed in the document is erased, and you can begin writing new content to the document.

The data you write after the document.open isn't actually displayed until you close the stream with the document.close method. You can use this to ensure that blocks of write commands execute at the same time.

You can optionally specify a MIME document type in the document.open command. This enables you to create a document of any type, including images and documents used by plug-in applications. You'll learn about plug-ins in detail in Hour 16, "Working with Sounds and Plug-Ins."

Using Links and Anchors

Another child of the document object is the link object. Actually, there can be multiple link objects in a document. Each one includes information about a link to another location or an anchor.

You can access link objects with the links array. Each member of the array is one of the link objects in the current page. A property of the array, document.links.length, indicates the number of links in the page.

Each link object (or member of the links array) has a list of properties defining the URL. The href property contains the entire URL, and other properties define portions of it. These are the same properties as the location object, defined later in this hour.

You can refer to a property by indicating the link number and property name. For example, the following statement assigns the entire URL of the first link to the variable link1:

link1 = links[0].href;

The anchor objects are also children of the document object. Each anchor object represents an anchor in the current document—a particular location that can be jumped to directly.

Like links, you can access anchors with an array, anchors. Each element of this array is an anchor object. The document.anchors.length property gives you the number of elements in the anchors array.

Accessing Browser History | Next Section

Previous Section