Previous Topic Tutorial Table of Contents Next Topic
JavaScript tutorial

 

The Document Object

The document object is the container for all the html tags (that get turned into objects in the browser's memory) that you defined in your web page.  Almost all of the properties and subobjects of the document object are defined inside the <body> tag, but there are some properties from the header, such as the title, and some properties that exist "outside" of the document (in some loose sense), such as the URL, cookies and the referrer of the page.

The document object does not have any event handlers defined for its use. All event handlers that can be registered in the <body> tag are window object handlers (see the event handler table).

Among the important properties of the document object are alinkcolor, vlinkcolor, linkcolor, bgcolor and fgcolor
Unfortunately, only bgcolor is settable in NN4. All of them are settable in IE4+.

My fade-in script shows an example of changing the bgcolor property.

The document object is also the controller of the cookie property of browsers, but I will not be discussing cookies in this tutorial.  For a very thorough tutorial on cookies, visit chapter 19 of the online book Using JavaScript.

Probably the most frequent use of the document object is for writing new text to a page or frame. This is done with the three document methods:

document.open()
document.write( stringor variable )
document.close()

These three methods are used in combination to open a data stream to a document, write new content and then close the data stream.

A simple use of these is to place them in your page outside a function so that they execute while your page is loading.

For example, here's a simple bit of code to demonstrate:

<html>
<head>
<script language="JavaScript">
<!--
var txt = "<p>This line was written with ";
txt += "the <font color="navy">document.write()";
txt += "</font> method.</p>";
//-->
</head>
<body bgcolor="#ffffff">
<><p>This line was written normally.</p>
<script language="JavaScript">
<!--
document.open();
document.write( txt );
document.close();
//-->
</body>
</html>

Click here to see how this bit of code works.

< More typically, however, document.write() is used to overwrite a page or a frame with new information.  One example of this would be a two-frame web page that had a constant frame and a variable frame.  The constant frame might have a selection list from which you could select an item of interest. When an item was chosen, document.write() would be used to write information (and/or images) about that item in the variable content frame.

Previous Topic Tutorial Table of Contents Next Topic