This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
NOTE
You've already used the document.write method to display text within a Web document. The examples in earlier hours only used a single window and document, so it was unnecessary to use window.document.write—but this longer syntax would have worked equally well.
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.
Listing 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.)
NOTE
You might find that the document.lastModified property doesn't work on your Web pages. The date is received from the Web server, and some servers do not maintain modification dates correctly.
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.
NOTE
Bear in mind that the newline character is ignored by HTML, except inside the <pre> container. You will need to use the <br> tag if you want an actual line break.
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.
NOTE
You can also directly modify the text of a Web page on newer browsers using the features of the new DOM. You'll learn these techniques in Hour 20, "Using Advanced DOM Features."
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.
NOTE
If you use the document.open method on the current window, your script—part of the current document—will be cleared, and will stop executing. For this reason, these methods are best used with separate windows and frames. You'll learn about this in Hour 11.
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."
NOTE
MIME stands for Multipurpose Internet Mail Extensions. It's an Internet standard for document types. Web servers send a MIME type to the browser with documents to tell the browser how to display them. Typical browser documents are HTML (MIME type text/html) and text (MIME type text/plain).
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.
NOTE
Anchors are named places in an HTML document that can be jumped to directly. You define them with a tag like this: <a name="part2">. You can then link to them: <a HREF="#part2">.
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.