HomeJavaScript Page 8 - Controlling Browser Properties with JavaScript
Down to the Document - JavaScript
Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.
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>
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>
<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:
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.
JavaScript 
/ 120 
