Advanced Document Object Model
Document Methods
The document object has methods that can modify Web pages through the script.
The methods are script accessible with a reference in the following general format.
document.method()
Figure 8-9. General format to use document methods.
Selected methods of the document object are listed in the following table and illustrated below.
| Method |
Description |
| close() |
Closes the specified document. |
| open() |
Opens the specified document. |
| write() |
Writes to the specified document. |
Figure 8-10. Selected document methods.
The document.write() method has been used throughout these tutorial as a means of writing variables, text strings, and XHTML code to a Web page.
When the statement appears in an inline script, the items are written to the page as it is loaded into the browser.
You cannot include document.write() within a function call to write to the current page since you cannot write to a page after it has been loaded.
You can, however, include the statement within a function call that writes to a secondary window.
Document Streams
In earlier examples using document.write(), the associated document.open() and document.close() methods were not used.
However, the more formal way of writing to documents in secondary windows is to use a document stream along with these methods.
This is the preferred way of building a document through script before opening it in a secondary window.
The document.open() method opens what is called an output stream to collect the output of subsequent document.write() methods.
After all such writes are performed, the document.close() method causes any output written to the output stream to be displayed in the document opened in a secondary window.
The general outline of this process is shown below.
var window = window.open("", "secondary");
window.document.open();
window.document.write("...stuff to write...");
window.document.close();
Listing 8-15. Opening, writing to, and closing an output stream.
Of course, you can write text, HTML tags, graphics, links, and whatever to the document stream. Below is a quick example using the following script.
function winWrite()
{
var newWin = window.open("", "", "width=400,height=200");
newWin.document.open();
newWin.document.write("<html><body>");
newWin.document.write("<h3>Writing to Documents</h3>");
newWin.document.write("<h>Here are some HTML tags, text, and a button ");
newWin.document.write("that are written to the document stream.</h>");
newWin.document.write("<input type='button' value='Close' onclick='self.close()'/>");
newWin.document.write("</body></html>");
newWin.document.close();
}
window.addEventListener('load', function(){
document.getElementById('newWinBtn').addEventListener('click', winWrite, false);
});
<input type="button" value="Open Window" id="newWinBtn">
Listing 8-16. Code to write to an output stream.
Writing to Open Documents
You can continue writing to a document created with a document stream.
You just need to remember not to close the document, leaving the output stream open for subsequent writes.
Click the following "Open Window" button to create an original document; then click the "Write Window" button to add text to the open document.
var newWin2;
function winOpen()
{
newWin2 = window.open("", "", "width=400,height=200");
newWin2.document.open();
newWin2.document.write("<html><body>");
newWin2.document.write("<h3>Writing to Documents</h3>");
newWin2.document.write("<div id='content'></div>");
newWin2.document.write("<p><input type='button' value='Close' ");
newWin2.document.write("onclick='self.close()'/></p>");
newWin2.document.write("</body></html>");
}
function winWriteMore()
{
var node = document.createElement("p");
var textnode = document.createTextNode("Here is more text written to an open window.");
node.appendChild(textnode);
newWin2.focus();
}
function winClose()
{
newWin2.close();
}
window.addEventListener('load', function(){
document.getElementById('winOpenBtn').addEventListener('click', winOpen, false);
document.getElementById('winWriteBtn').addEventListener('click', winWriteMore, false);
document.getElementById('winCloseBtn').addEventListener('click', winClose, false);
});
<input type="button" value="Open Window" id="winOpenBtn"/>
<input type="button" value="Write Window" id="winWriteBtn"/>
<input type="button" value="Close Window" id="winCloseBtn"/>
Listing 8-17. Code for multiple writes to an output stream.
The "Write Window" button can be clicked multiple times, each time adding more text to the open window.
Since the button click occurs in the original window, the secondary window is overlaid by the original window, possibly hiding it.
Therefore, the newWin2.focus() method is applied after each write to the secondary window in order to bring the window to the front.