J3 Limited
 
Google
WWW J3Ltd
 
JavaScript Document Object

Contents

Introduction

Properties

Methods

Events

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Introduction

  • A Document object is described as what lies between the <HEAD> and <BODY> tags
  • Various components which make up a document are accessible as properties (anchor, form and link arrays).

The document object has many properties, and a few powerful methods. Like the window object, is a very important object (worth getting to know).

A document object has the following properties:

alinkColor

lastModified

anchor

link

anchors

linkColor

bgColor

links

cookie

location

fgColor

referrer

form

title

forms

vlinkColor

history

A document object has the following methods:

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


 Properties

The document object has the following properties, some of which are themselves objects.

  • alinkColor: specifies the color of a link as it is active (between the mouse button being pressed, then released). This document's active link colo(u)r is: .
  • The code to print the abover is as follows:

    <SCRIPT LANGUAGE="JavaScript"> document.write(document.alinkColor) </SCRIPT>

  • anchors: an array which lists all the anchors in a document.
  • bgColor: the document's background colo(u)r. This document's background colo(u)r is: .
  • The code to print the abover is as follows:

    <SCRIPT LANGUAGE="JavaScript"> document.write(document.bgColor) </SCRIPT>

  • cookie: this one's got a lot to say for itself, and it don't look like a digestive to me.
  • fgColor: The foreground colo(u)r of the document (or text colo(u)r). This document's foreground colo(u)r is: .
  • The code to print the above is as follows:

    <SCRIPT LANGUAGE="JavaScript"> document.write(document.fgColor) </SCRIPT>

  • forms: an array with all the forms in a document.
  • lastModified: the date the document was last modifed, this one was last modified on
  • The code to print the above is as follows:

    <SCRIPT LANGUAGE="JavaScript"> document.write(document.lastModified) </SCRIPT>

  • linkColor: the color of a link. This document's link color is
  • links: an array object of all the links in a document
  • location: is the complete URL of the document. This document's location is
  • referer: is the URL of the calling document. This document's referer is
  • title: the document's title. This document's title is
  • vlinkColor: the color of a previously viewed link. For this document it is
  • anchor: an achor object. I am not sure why this is said to be a property of the document, since there is the anchors array to get at all the anchors in a document.
  • form: again I am not sure why this is listed as a property of the document, the forms array is used to get at all the forms in a document.
  • history: the history object can be used to navigate back or forwards through the user's previous URL's
  • link: this is also listed as a property of the document. The links array is used to get at all the links in a document.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Methods

There aren't many methods to a document, but some are very useful. For example the write and writeln are used extensively in this tutorial to display example text.

  • clear: clears text in a document's window.
  • Press the buttons in order if you must:



    (enlightening no?)

    The code to produce the above is as follows:

    1. Define three functions, and one variable, all enclosed in <SCRIPT> / </SCRIPT> tags:
      1. <SCRIPT>
        var wWindow
        function ClearWindow() {

          wWindow.document.clear()
          wWindow.document.write("<TITLE> New Heading</TITLE>",

            "<BODY> <H1 ALIGN=CENTER>New Heading!</H1>",
            "Some new demonstration text.</P></BODY>")

        }
        function OpenWindow()
        {

          wWindow = window.open("JAVDEMO.HTM", "WindowName",

            "height=150,width=250,height=200,resizable=1")

        }
        function CloseWindow()
        {

          wWindow.close()

        }
        </SCRIPT>

    2. Inside form tags, define buttons, assigning functions to each one:
      • <FORM>

          <INPUT TYPE="button" VALUE="1. Open a Window" onClick="OpenWindow()">
          <INPUT TYPE="button" VALUE="2. Clear its document" onClick="ClearWindow()">
          <INPUT TYPE="button" VALUE="3. Close the window" onClick="CloseWindow()">

        </FROM>

  • close: closes a stream opened with document.open(). The close method stops the browser from trying to get the rest of the document, causing the "document done" status to be displayed in the browser's status bar.
  • open: opens a stream to collect the output of write or writeln methods (see next methods). This method has an optional parameter which specifies the mime type. The default is "text/html".
    • Syntax: document.open( [ "mimeType" ] ), where the optional mimeType can be one of:

      1. text/html
      2. text/plain
      3. image/gif
      4. image/jpeg
      5. image/x-bitmap
      6. plugIn
      7. where plugIn is a two-part (presumably that means a mime type which is of the format name1 / name2 ?) MIME type Netscape supports.

      A typical use of this method is as follows:

      1. open a window object
      2. open a document object within that window
      3. write and / or writeln to the document
      4. close the document
      5. optionally open the document again to begin output again
      6. finally close the window
  • write: writes HTML expresssions to a document object. Useful for putting last modified dates in documents, or for generating full HTML documents (see clear method example).
  • Syntax: write( expression [ , expression ... ] )

  • writeln: as for write, but appends a newline character after the command is executed (that means after all the expressions within one write statement have been carried out). Normally HTML ignores newlines, but it can be useful in <PRE> tags, or for script generation.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Event Handlers

There are no event handlers for the document object. See the Window Object's onLoad and onUnload event handlers for the nearest thing.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


  Copyright 2000 J3 Ltd Permission is granted to reproduce material on this page, on the condition that a reference to "WWW.J3Ltd.com" is given as the source of the material.