| home / programming / prof_java2 / 1 |    [previous] [next] |
|
|
|
The document object is actually a property of the window object, but as you learned earlier, any property
or method of the window object may be accessed directly, so this line of code will return “true”:
alert(window.document == document);It is also unique in that it is the only object that belongs to both the BOM and the DOM (the document as it relates to the DOM is discussed in the next chapter). From the BOM perspective, the document object is made up of a series of collections that access various parts of the document as well as give information about the page itself. Once again, because the BOM has no standards guiding implementations, each browser tends to have slightly different implementations for document; this section focuses on the most common functionality.
The following table lists some of the common properties for the BOM document object:
The lastModified property retrieves a string representing the
date that the page was last modified, which is of marginal use unless you want
to display the last modified date on a home page (which can also be done using
server-side technology). Likewise, the referrer property isn’t
very useful unless you want to track where users are coming from (perhaps to
see if someone visited your site via Google or another search engine). But again,
this can also be handled server-side.
The title property is read/write, so you can change the title of your page at any time regardless of
what the HTML contains. This is particularly useful when a site uses a frameset and only one frame is
changing while the overall frameset remains unchanged. Using this property, you can change the title
(which is displayed in the overall browser title bar) to reflect the new page loaded into the frame:
top.document.title = “New page title”;The URL property is also read/write, so you can use it to retrieve the URL of the current page, or you can
set it to a new URL, which causes the window to navigate there. For example:
document.URL = “http://www.wrox.com/”;As mentioned previously, the document object also has a number of collections providing access to various
parts of the loaded page. These collections are outlined in the following table:
Similar to the window.frames collection, each of the document collections is
indexed both by number and by name, meaning that you can access an image by
document.images[0] or document.images [“image_name”].
Consider the following HTML page:
<html>
<head>
<title>Document
Example</title>
</head>
<body>
<p>Welcome
to my <a href=”home.htm”>home</a> away from home.</p>
<img src=”home.jpg”
align=”right” name=”imgHome” />
<form method=”post”
action=”submit.cgi” name=”frmSubscribe”>
<input
type=”text” name=”txtEmail” />
<input
type=”submit” value=”Subscribe” />
</form>
</body>
</html>
Here are the ways to access various parts of this document:
To access the link, refer to document.links[0].
To access the image, refer to document.images[0] or document.images[¡°imgHome¡±].
To access the form, refer to document.forms[0] or document.forms[¡°frmSubscribe¡±].
Additionally, all the attributes of links, images, and so on all become properties of the objects. For example,
document.images[0].src is the code to get the src attribute of the first image.
Finally, several methods exist on the BOM document object. One of the most often used is the write()
method or its sibling writeln(). Each of these methods accepts one argument, which is a string to write
to the document. The only difference is, as you might expect, writeln() adds a new line (\n) character
at the end of the string.
Both methods insert the string content in the location where it is called. The browser then treats the document as if the string were part of the normal HTML in the page. Consider the following short page:
<html>
<head>
<title>Document
Write Example</title>
</head>
<body>
<h1><script
type=”text/javascript”>document.write(“this is a
test”)</script></h1>
</body>
</html>
The page is displayed in the browser as if it were the following:
<html>
<head>
<title>Document
Write Example</title>
</head>
<body>
<h1>this is
a test</h1>
</body>
</html>
You can use this functionality to dynamically include external JavaScript files as well. For example:
<html>
<head>
<title>Document
Example</title>
<script type=”text/javascript”>
document.write(“<script
type=\”text/javascript\” src=\”external.js\”>”
+
“</scr” + “ipt>”);
</script>
</head>
<body>
</body>
</html>
This code writes a <script/> tag to the page, which causes
the browser to load the external JavaScript file as it would normally. Note
that the string “</script>” is split into two
parts (“</scr” and “ipt>”).
This is necessary because anytime the browser sees </script>,
it assumes that the code block is complete (even if it occurs inside of a
JavaScript string). Suppose the previous example were written without breaking
up the “</script>” string:
<html>
<head>
<title>Document
Example</title>
<script type=”text/javascript”>
document.write(“<script
type=\”text/javascript\” src=\”external.js\”>”
+
“</script>”); //this will cause a problem
</script>
</head>
<body>
</body>
</html>
The browser views this page as:
<html>
<head>
<title>Document
Example</title>
<script type=”text/javascript”>
document.write(“<script
type=\”text/javascript\” src=\”external.js\”>”
</script>
</script>
</head>
<body>
</body>
</html>
As you can see, forgetting to split up the “</script>”
string causes major confusion. First, there is a syntax error inside of the
<script/> tag because the document.write()
call is missing its closing parenthesis. Second, there are two </script>
tags. This is why you must always break up the “</script>”
string when writing <script/> tags to the page using document.write().
Remember that both write() and writeln() must
be called before the page has been fully loaded in order to insert the
content properly. If either method is called after the page is loaded,
it erases the page and displays the content specified. |
Related closely to write() and writeln() are the
open() and close() methods. The open()
method is used to open an already loaded document for writing; the close()
method is used to close a document opened with open(), essentially
telling it to render everything that was written to it. This combination<
of methods is typically used to write to either a frame or a newly opened
window, such as the following:
var oNewWin = window.open(“about:blank”, “newwindow”,
“height=150,width=300,top=10,left=10,resizable=yes”);
oNewWin.document.open();
oNewWin.document.write(“<html><head><title>New Window</title></head>”);
oNewWin.document.write(“<body>This is a new window!</body></html>”);
oNewWin.document.close();
This example opens a blank page (using the native “about:blank”
URL) and then writes a new page to it. To do this appropriately, the open()
method is called before the using write(). After the writing is
complete, close() is called to complete the rendering. This technique
is useful when you want to display a page without going back to the server.
| home / programming / prof_java2 / 1 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 27, 2005
URL: http://webreference.com/programming/prof_java2/1
