 document
Object
A document is the file of HTML codes that describe a
given page. A page is what appears within the browser
window. So, every window is associated with a document Object.
A typical HTML document contains a variety of characteristics other
than the content of the page itself. These include a background image
(often called a background "texture"), background color,
foreground color, and the colors of hypertext links. In traditional
HTML, these traits are all defined as attributes of the <BODY>
tag. The document Object also contains properties for every anchor,
link, and form on that page, as well as all of the sub-elements of those
elements. It also contains Properties for its title (the content of the
<TITLE> field of the page), its
foreground color (the fgColor
Property), its background color (the bgColor
Property), its various link colors, and other attributes of the page
itself.
Like the Web browser's window, the document Object is also a built-in
Object of JavaScript. It has its own set of Properties and Methods with
which you can influence various aspects of the current document. This
page takes you through the Properties and Methods of the document Object
and shows you how to use them in everyday life.
Properties
The document Object has many Properties associated with it. Most of
these properties mimic characteristics that may have been defined in
HTML tags. But it's far from redundant mimicry; allowing you to access
the properties via JavaScript opens up the possibility of changing a
document's original characteristics, if you want as we seen so far.
The first property examples that follow illustrate this concept.
 bgColor
and fgColor
Two of the most basic characteristics of a document are its colors. A
document has two main colors: a background color and a foreground color.
The background color defines the color of the "page" itself,
while the foreground color defines the color of the text that appears on
the page.
In documents, colors are specified in what is known as a hexadecimal
triplet. Each color specification actually contains three
specifications: red, blue, and green. Thus, you define the background
color, for instance, by specifying how much red, blue, and green to mix
together to yield the final color. Each color will have a value from 0
to 255, 0 being a complete lack of the color, and 255 being 100 percent
of the color.
A Quick Lesson on Hexadecimals
More
Colors alinkColor, vlinkColor,
and linkColor
You can specify three other colors in a document. Each of these
properties functions the same way as the previous two—they simply
affect the color of different characteristics of the page.
- alinkColor Defines the color
of an "activated" link. An activated link is a
link that has been clicked, but for which the mouse button has yet
to be released.
- vlinkColor Defines the color
of a link that has already been visited.
- linkColor Defines the color
of a link that has not yet been visited and is not
currently being clicked.
You can use each of the above in the standard ways for Object Properties:
you can either retrieve the value from or assign a new value to
document.alinkColor, document.vlinkColor,
and document.linkColor. If you've
coded HTML before, you might have noticed that you can set these same
colors in standard HTML tags. So why bother with JavaScript? Because by
using JavaScript, you can change the colors in a given page at any time
you want — on the fly — perhaps as a result of certain user events.
In HTML, you can define the colors only once for the life of the page.
title
The property document.title holds
the value of the title of the document as defined in the HTML tags <TITLE>
and </TITLE>. The title is what
appears in the browser window's upper border and in the bookmark list if
the page is book marked by a user. The title does not actually appear
within the content of the page itself.
You can retrieve the document's title
from this property, however, you cannot assign a new title to the
document via this property.
anchors
An anchor is a spot in a page that has been marked with a
"name" within the HTML code. Links can then point to anchors
to send a user to specific locations within a single page. Anchors are
defined in HTML with the <A
NAME=> tag.
The document.anchors Property is
an Array (that is, an Object in and of itself) that contains the value
of each anchor on the page, in the order in which they were defined in
the HTML code. Suppose your page has five anchors defined within it. In
that case, there are five properties in the Object document.anchors:
document.anchors[0]
document.anchors[1]
etc...
document.anchors[4]
Each of the above contains the name of the anchor corresponding to
the order in which it was defined. So if you named and defined your
anchors in the order Monday, Tuesday, Wednesday, Thursday, Friday, those
would be the values contained in document.anchors[0]
to document.anchors[4],
respectively.
You may use the property length, as in document.anchors.length
to retrieve the total number of anchors defined.
Note that you would not use an assignment to document.anchors
to bring the user to an anchor within the document. That could be done
several ways in JavaScript. Remember that an anchor is specified in an
URL with a hash mark following the pathname. Thus, you could assign the
entire URL with a hash mark and desired anchor name to document.URL.
links
In the same spirit as the anchors property, you have the links
property. Most pages contain several link definitions throughout the
HTML code, as created by the <A HREF=>
tag.
document.links is another Object
Array that contains each of the links specified in the current page. As
with document.anchors, there are as many properties of document.links
as there are links in the page, as indicated here:
document.links[0]
document.links[1]
etc...
You can retrieve the total number of links in the document using the
property document.links.length.
As usual, you can change the value of a particular link by assigning a
new string to one of the above properties, as in document.links[2]
= "http://www.yahoo.com".
Imagine a scenario where this reassignment may be useful. Say you
have a link in the page that (on-screen) reads “Click here to
continue.” Perhaps, though, you would like that link to take some
users to one URL and take other users to a different URL, depending on
some other condition, such as whether they've purchased more than a
certain quantity of mugs.
Image
Maps and Hyperlinks
More advanced readers may be wondering how image maps fold into the
mix. An image map is an image with sub regions defined as hyperlinks.
The answer is quite easy: each area within the image map is simply a
hyperlink and thus part of the document.links[]
Array. So if the third hyperlink on a page is an area region of an image
map, it can be referred to as document.links[2]
(remember that the first hyperlink is element 0 of the Array).
To do so, you can use an if...else statement to evaluate the user's
mug purchase, and on each condition, you can assign a different URL
specification to the above link. This would be transparent to the user.
He would simply click the link labeled “Click here to continue,” and
he'd be taken to an appropriate page as determined by your JavaScript
program.
lastModified
This property simply contains a string value reflecting the date that
the document was last modified. A function might use this property, for
instance, to communicate to the user how "fresh" the current
page is, in case some of its information may potentially become
outdated.
referrer
This property contains the URL of the page that led to the current
page. That is, if the user reached the current page via a link from
another page, this property contains the URL of the page that linked him
here. You might consider using this property to track statistics about
which sites users are jumping to yours from.
URL
URL is a read-only string property that contains the complete URL of
the current document. URL is usually equal to location.href for the
window that contains document. These two are not always equal, however,
because the document.URLproperty may
be modified through URL redirection – location.href contains the
requested URL while document.URL specifies
the actual URL where it was found.
Forms
As with anchors and links, the document Object contains an Array of
properties for each form defined in the document. However, there's more
to forms than simply a value (as was the case for anchors and links).
Images
New to JavaScript 1.1, the document Object now contains an Array
property that refers to each image in the current page. This Array and
its related Image Object allow for a variety of new possibilities.
Applets
Also newly added to JavaScript 1.1 is the applets Array and Applet
Object of the document Object. With the ability to reference Java
applets in the current page, you can communicate between JavaScript and
Java applets.
Methods
The Methods of the document Object are, fortunately, relatively
straightforward and useful.
write()
and writeln()
close()
&open()
The open() and close()
methods are used to start and stop buffered output. If you call the open()
method, perform a series of write()s
and/or writeln()s, and then call the
close() method, the results of your
write operations are laid out and appear on the page.
NOTE: Do not confuse the open and close methods of the
document Object with the window methods of the same names. They perform
very different functions, and are not interchangeable. Use an explicit
reference - document.open() or
window.open() - to obtain the
appropriate one.
Events
It so happens that the document Object also has two relevant Event
Triggers worth mentioning: onLoad
and onUnload.
onLoad
You can use this event trigger to launch a particular JavaScript
program or function upon the completion of initially loading the
document. Perhaps you coded a JavaScript function that displays an alert
message to the user before he even begins reading the page. The onLoad
event would be useful for this purpose.
You include the event as an attribute of the document's <BODY>
tag, as in:
In this example, the onLoad event
handler is set to call the function welcome(),
which performs some feat of programming, such as displaying an alert
window that requires the user to read an important disclaimer before he
begins looking at the page. (Users will likely find this very annoying,
but you could program it.)
The <BODY> tag occurs very early
on in the HTML document. This highlights the need to define your
functions as early in the document as possible — specifically, within
the <HEAD> </HEAD>
section, which is one of the only places prior to the <BODY>
tag that you have an
opportunity to do so.
onUnLoad
This Event is triggered when the user "unloads" or exits
the document. It would also be defined as an attribute of the <BODY>
tag. You might, for example, use this to show a message to the user
after he chooses to leave your page, such as by calling a function that
writes the text "You come back now, you hear?" into the
document window.
As it stands, the only major aspect of JavaScript remaining to be
covered is the forms Objects.
Summary:
- The document is the HTML file that loads as a Web page in the
browser window.
- JavaScript contains a document Object, which possesses a number of
properties through which you can read or modify characteristics of
the current document.
- You can use document.bgColor
and document.fgColor to alter
the colors of the background or foreground text, respectively.
Colors are defined in hexadecimal RGB values.
- document.anchors and document.links
are Arrays that contain the values of a document's defined anchors
or links, respectively. For example, document.link[2]
refers to the third link defined in the document (remember,
the first link is link[0]).
- You can use the method document.write("string")
to output HTML tagged text to the current window.
- Use the event triggers onLoad
and onUnLoad to watch for users
opening or exiting your page. Both are defined as attributes in the
<BODY> tag.
| 
Properties