Sunday, June 19, 2005
Properties II: The Document Object
Blog Entry #13
(2) DevGuru's document object page
(4) IRT's document object page
bgColor, fgColor, linkColor, alinkColor, vlinkColor, location, referrer, title, lastModified, cookie, anchors, forms, links
Joe demonstrates the first nine of these properties in the Primer #7 script, which reads them, returning their values. Of this group, the bgColor, fgColor, linkColor, alinkColor, vlinkColor, location, and title properties are in fact read/write, whereas the referrer and lastModified properties are read-only.
The first five properties are analogous to familiar-but-now-mostly-deprecated attributes of the document <body> element:
|Document Property||Corresponding <body> Attribute|
The code for the button is:
<input type="button" value="Click Here to See the document.location Property in Action" onclick="document.location='#doclocDiv';">
In the name of completeness: in comparing the document.location and document.URL expressions, I find that they are indeed both writable and return the same values when using MSIE; with Netscape, in contrast, document.location is writable but document.URL is read-only, although they read identically.
For the document referrer property, which as noted above is read-only, DevGuru provides the best and most precise definition: "If a destination document [the one you're currently looking at] is reached by a user clicking on a Link object [a hyperlink] in another document (the referrer), this property returns the referring document's URL." The document.referrer command does not simply return the URL of the Web page that you were at prior to the current page. If you arrive at the current page in some way other than clicking a link on the preceding page, for example:
(a) you typed the URL of the current page into the browser's address bar and then hit the return/enter key; or
(b) perhaps the current page is a bookmark and you accessed it via the Favorites/Bookmarks menu; or
(c) maybe you are reaccessing the current page via the Back button on the browser's toolbar after following a link on the current page, etc.;
then, as Joe notes, "no [referring] page is available...it [document.referrer] returns a blank space."
Roll your mouse over these words to change the page title.
(The code for this is...ah, I'm sure that you can write it out by now.)
One might think that because status is a property of the window object, as was noted in Primer #4, then title would be a property of the window object; evidently not.
Like the title property, the document lastModified property, which "returns
Now, what about those last four properties - cookie, anchors, forms, and links? According to Joe, "examples of [these] would be above your heads at this point." I'm not so sure I agree...in any case, they still deserve some comment.
The cookie property of the document object is read/write. A document can use the document.cookie command to write a cookie to the user's hard disk or to retrieve the name/value information of cookies that have been set previously by (more precisely, are associated with) that same document. We will discuss the setting and retrieval of cookies in more detail in Script Tips #60-64.
The anchors, forms, and links properties are a subset of a larger group of property/object arrays that are listed under "Document Collections" at IRT's document object page.
(Strangely, Joe does not bring up built-in arrays until Primer #26 - see the "Here's a little more on arrays:" subsection thereof. FWIW, the built-in frames array of the window object crops up in Joe's "So You Want To Change More Than One Frame, Huh?" tutorial.)
I do a lot of linking on this blog, so let's wrap up this entry with a couple of demos for the document links property.
(1) How many links does this page have? Roll your mouse over this sentence to find out.
The code for the demo sentence is:
<span style="color:brown;" onmouseover="window.alert('This page has ' + document.links.length + ' links.');">Roll your mouse over this sentence to find out.</span>
As you can deduce, length is a property that returns the size of the links array of the document. We'll see other uses of the length property in due course.
(2) Where does the first link on this page point to? Roll your mouse over this sentence to find out.
The code for the demo sentence is:
<span style="color:blue;" onmouseover="window.alert('The first link on this page points to: ' + document.links.href);">Roll your mouse over this sentence to find out.</span>
The document.location demo target anchor
In the previous entry, I complained that "there is no mention [in Primer #7] of the properties relating to text, image, and form elements". Of course, that doesn't mean that WE can't take a look at some of these properties, and we'll do that in the next post.