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:
// 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.
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>
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.