Creating a Document at the Client using DOM

DOM Document Object - Part 5

Forward: In this part of the series, we see how to create a document with the browser at the client computer, using the DOM object.

By: Chrysanthus Date Published: 31 Jul 2012

Introduction

This is part 5 of my series, DOM Document Object. In this part of the series, we see how to create a document with the browser at the client computer, using the DOM object. I assume, you have read the previous parts of the series; this is a continuation.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Document Stream
When a web page is loading, the html elements of the document are displayed one by one in the order in which they were typed, very fast. That one-by-one way of doing things is what is called a stream, similar to a geographical stream that flows in a line.

The open() and close() Document Object Methods
You create a document at the client as follows: You start a stream; you send html elements into the stream; then you stop the stream. The document object has the open() method to start the stream and the close() method to stop the stream. This stream is described as the output stream. After that, a new document is formed over the previous document in the same tab window. The html elements are sent using the write() method.

Illustration
Try the following code, clicking the button when a page is displayed:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">

        doc = "<!DOCTYPE HTML><html><head><title>A Very New Title</title></head><body><p>Client Document</p></body></html>";

        function createDocument()
            {
                docRef = document.open();
                docRef.write(doc);
                docRef.close();
            }
    </script>
</head>
<body>
    <p>A Page.</p>

    <button type="button" onclick="createDocument()">Click</button>

</body>
</html>

Using the open() and close() Methods
The open() and close() methods are the document object methods. So, to code them, you should type the reserved word, document, first, then a dot and then the open or close method.

Reference from the open() Method
When the open() method is used, a reference is returned. This reference can be assigned to a variable. It is the reference that is used to write the html elements and to close the stream. Read the above code, if you have not done so.

Writing into the Document Bit by Bit
You can write into the new document bit by bit, by using the write() method more than once, before closing the stream. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">
        function createDocument()
            {
                docRef = document.open();
                docRef.write("<!DOCTYPE HTML>");
                docRef.write("<html><head><title>A Very New Title</title></head>");
                docRef.write("<body><p>Client Document</p></body>");
                docRef.write("</html>");
                docRef.close();
            }
    </script>
</head>
<body>
    <p>A Page.</p>

    <button type="button" onclick="createDocument()">Click</button>

</body>
</html>

Creating a document at the client is a handy feature in the new technology called, Active Client Pages - see later.

End of Series
This is the end of the series. I hope you appreciated it. The next series you should study in this blog is, “DOM Location Object”.

Chrys

Broad Network

Related Articles

Creating a Document at the Client using DOM

DOM Document Object - Part 5

Introduction

Related Links

Comments