JavaScript Editor JavaScript Debugger     JavaScript Editor 



Team LiB
Previous Section Next Section

Chapter 13: Handling Documents

This chapter explores the Document object, which can be used to manipulate the (X)HTML document within a window or frame. We begin by studying the Document object facilities common to all JavaScript-aware browsers such as color properties, anchors[], links[], and basic methods like document.write(). We briefly discuss the proprietary features added by the 4.x generation of browsers. However, the bulk of the chapter covers the standard Document Object Model introduced in Chapter 10. The focus here is not just on the basic creation and manipulation of various (X)HTML using JavaScript and the DOM, but possible applications of such facilities. A special emphasis is placed on DOM manipulation ideas specific to HTML not presented in Chapter 10, such as special table handling routines.

Historic Document Object Properties

Under the traditional JavaScript object model supported in early browsers like Netscape 3, very little of the HTML document within a window was available for manipulation. The primary properties of the Document object were related to the basic attributes of the HTML <<body>> tag such as background, link, and text colors. Some other basic properties included the document’s modification time, title, and URL. Of course, within the Document object, there were collections of the various markup elements included in the document such as anchors, forms, images, and links. Later under the DOM we are able to go beyond the predefined collections and access any arbitrary markup element. For now let’s take a look at the Document properties that have historically been supported by any JavaScript-aware browsers.

Document Color

The traditional JavaScript object model supports numerous properties to read and set the color of the document and its text and links. The Document properties for accessing page color are shown in Table 13-1. Notice how these properties correspond to the HTML attributes for the <<body>> tag.

Table 13-1: Document Properties Related to Color

Document Object Property

Description

aLinkColor

The color of a link when it is active or pressed, specified
by <body alink="color"> or, by default, red

bgColor

The background color of the page as specified by
<body bgcolor="color">

fgColor

The text color of the document specified by
<body text="color">

linkColor

The unvisited color of a link (when unspecified, blue) specified by <body link="color">

vlinkColor

The visited link color specified by <body vlink="color">, which is by default purple

Of course under modern HTML specifications, these attributes are deprecated in favor of CSS properties, so it would be assumed that access to them via Document properties would be as well. In fact, while the DOM Level 1 does not support these properties directly, all JavaScript-aware browsers continue to support them and probably will do so for the foreseeable future.

A complete example of the use of these color-related properties is presented here and its rendering in Figure 13-1.

Click To expand
Figure 13-1: Rendering of background and color example
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Document Color Test<</title>>
<<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
function setColors(form)
{
 with (form)
  {
    document.bgColor = backgroundColor.value;
    document.fgColor = textColor.value;
    document.alinkColor = activeLinkColor.value;
    document.linkColor = linkColor.value;
    document.vlinkColor = visitedLinkColor.value;
  }
}
//-->>
<</script>>
<</head>>
<<body bgcolor="red" text="black" link="blue" alink="yellow" vlink="purple">>
<<h2>>Test Links<</h2>>
<<a href="fakeURL.htmp" onclick="return false">>Unvisited Link<</a>><<br />>
<<a href="#" onclick="return false">>Click to show active color<</a>><<br />>
<<a href="#">>Visited link<</a>><<br />>
<<form name="colors" id="colors" action="#" method="get">>
<<h2>>Page Colors<</h2>>
Background Color: 
<<input type="text" name="backgroundColor" id="backgroundColor" value="red" />>
<<br />>
Text Color: 

<<input type="text" name="textColor" id="textColor" value="black" />><<br />>
<<h2>>Link Colors<</h2>>
Unvisited: 
<<input type="text" name="linkColor" id="linkColor" value="blue" />><<br />>
Active: 
<<input type="text" name="activeLinkColor" id="activeLinkColor" value="yellow"
 />><<br />>
Visited:
<<input type="text" name="visitedLinkColor" id="visitedLinkColor" value="purple"
 />><<br />>
<<input type="button" value="set colors" onclick="setColors(this.form);" />>
<</form>>
<</body>>
<</html>>
Note 

You may wonder how to manipulate other <<body>> attributes such as background. This is left to DOM or DHTML object models discussed later in the chapter.

Common uses of these properties include modification of color based upon user preference or time of day. For example, a page might display one color scheme in the morning and one in the night.

Last Modification Date

A very useful property of the Document object is lastModified. This property holds a string containing date and time that the document was last modified (saved). This property can be useful to output the date a page was modified on, like so:

<<script type="text/javascript">>
<<!--
  document.writeln("Document Last Modified: "+document.lastModified);
//-->>
<</script>>
Click To expand

A common misconception with the lastModified property is that it returns a Date object, when it in fact returns a string. You cannot directly use the various Date methods and properties discussed in Chapter 7 on this property, so

document.writeln("Last Modified Hour: "+document.lastModified.getHours());

throws an error in browsers. To utilize the Date methods, instantiate a new Date object from the string returned from document.lastModified like so:

var lastModObj = new Date(document.lastModified);
alert(lastModObj.getHours());

Location and Related Properties

The Document object supports a few properties related to the location of the document being used including: document.location, document.URL, and document.referrer. The document.location property under Netscape 2 is a read-only property holding a text string of the current URL of the document in the browser. Under later browsers from both vendors document.location simply appears to be a pointer to the window.location object discussed in Chapter 13. Because of this you can both read and set this value.

alert("Current location: "+document.location);
document.location = "http://www.yahoo.com";  // set new location

As a pointer to the actual Location object, you can also access its properties like pathname, protocol, port, and so on.

alert("Current URL protocol: "+document.location.protocol);  
// might return http or file

Cautious JavaScript developers will want to use the Location object directly with window.location rather than rely on this common mapping.

The URL property of the Document object holds a read-only string containing the URL for the current document. It is rarely used because of the availability of window.location and document.location.

The referrer property holds the URL of the referring document, in other words, the URL of the document that contained an activated link that holds the current document. If there is no referring URL because a user typed in the URL directly or browsed to the file, this property will be blank. The referrer property cannot be set.

You may find that when experimenting with document.referrer on a local system, you do not see a value even when a link is followed. The reason for this is that the HTTP protocol has to be used to reference the file to pass along a referring URL. HTTP requests may contain the referer value, which is misspelled as per the specification. JavaScript’s document.referrer draws its value from this; so if you were to upload an example that could be linked and performed alert(document.referrer) when requesting the document over a network, you should see the URL that linked to the current document.


Team LiB
Previous Section Next Section


JavaScript Editor JavaScript Debugger     JavaScript Editor


©