Controlling Browser Properties with JavaScript - Down to the Document (
Page 8 of 8 )
Under the top-level Window object, comes the Document object. This object represents the head and body of the HTML page loaded in the browser, including all its images, forms and links. Like the Window object, this one too comes with its own methods and properties.
One of the Document object's commonly-used properties is the write() method, which can be used to write text to the Web page at run-time. Take a look at the following example, which demonstrates how this works:
<html>
<head>
<script language="JavaScript">
function writeToDoc()
{
// retrieve value of user input
var text = document.forms[0].elements[0].value;
// open document and write to it
document.open();
document.write("<html><head><body>This is what you said: <br /><i>" + text
+ "</i></body></head></html>");
// close and display
document.close();
}
</script>
</head>
<body>
<form>
Say something <input type="text" size="20">
<input type="button" onClick="writeToDoc()" value="Write!">
</form>
</body>
</html>
Here, when the user enters some data into the form input box and clicks the "Write!" button, the writeToDoc() function is invoked. This function first reads the data entered by the user into a variable, then begins writing to the document. This writing process consists of first opening a stream to the document with document.open(), then writing to it with document.write() and then closing the stream with document.close(). The data written to the document is displayed only after document.close() is called.
As the example above illustrates, these methods make it possible to dynamically alter the contents of a page with JavaScript. Using DOM access methods, you can even focus the document.write() method on specific elements of the pages, writing - for example - directly inside a <div> or altering form contents on the fly, in response to user input or external events.
All the other elements of the page - forms, links, images - are organized under the Document object as arrays. Using the Document object as base, therefore, it's easy to access any of these elements and manipulate them (I've done this in some of the previous examples, to access form values). Take a look at this next example, which uses these object arrays to return some statistics about the number of links, images and forms within the document:
<html>
<head>
</head>
<body>
<!-- add some elements to the page -->
<form>
<input type="text" size="20">
<input type="button" value="Click me">
</form>
<a name="link1" href="link1.htm">
<image name="image1" src="image1.jpg"
width=20 height=20></a>
<a name="link2" href="link2.htm">
<image name="image2" src="image2.jpg"
width=20 height=20></a>
<a name="link3" href="link3.htm">
<image name="image3" src="image3.jpg"
width=20 height=20></a>
<image name="image4" src="image4.jpg"
width=20 height=20>
<form>
<input type="text" size="20">
<input type="button" value="Click me">
</form>
<script language="JavaScript">
// count the elements of each type and print
document.write("<br/>Links = "
+ document.links.length + "<br/> Images = "
+ document.images.length + "<br /> Forms = "
+ document.forms.length)
</script>
</body>
</html>
Since the images, forms and links within a document are structured as arrays under the Document object, it's easy to calculate the total number of items of each type - simply obtain the size of the corresponding array.
Of course, there's a lot more you can do with the Document object. Sadly, however, most of it involves manipulating the contents of the HTML document, not of the browser displaying it, and therefore doesn't fall under the ambit of this tutorial. If you're interested, though, you will find the following links most instructive:
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_document.asp
http://www.mozilla.org/docs/dom/domref/
http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/guide/navobj.html
http://www.wdvl.com/Authoring/JavaScript/Tutorial/
http://hotwired.lycos.com/webmonkey/javascript/tutorials/tutorial1.html
http://www.pageresource.com/jscript/
And that's about all I have time for at the moment. See you soon!
Note: Examples are illustrative only, and are not meant for a production environment. Examples have been tested on Microsoft Internet Explorer 5.x only. Melonfire provides no warranties or support for the source code described in this article.
/ 111 
