Dump Document in a New Window - FireFox 2.0 Result

JavaScript Tutorials - Herong's Tutorial Examples

Dr. Herong Yang, Version 2.20

JavaScript Tutorials - Herong's Tutorial Examples

∟W3C's Document Object Model (DOM) Specifications

∟Dump Document in a New Window - FireFox 2.0 Result

This section provides the FireFox 2.0 result of the tutorial example that dumps the browser built-in 'document' object as an XML message in new browser window by using DOM API attributes and methods.

If you run the JavaScript page, DOM_HTML_Document_Dump.html, in FireFox 2.0, you will get the "document" XML dump result in a new window:

<#document>
   <html>
      <head>
         <#comment>
             DOM_HTML_Document_Dump.html
   Copyright (c) 2008 by Dr. Herong Yang, http://www.herongyang.com/

         </#comment>
         <title>
            <#text>
               Dump HTML Document in New Window
            </#text>
         </title>
         <#text>
            




         </#text>
         <script type="text/javascript">
            <#text>
               
function nodeToXML(node, indentation, out) {
   out += indentation+"<"+node.nodeName.toLowerCase();
   if (node.attributes!=null) {
      for (var i=0; i<node.attributes.length; i++) {
         var item = node.attributes.item(i);
         var value = item.nodeValue;
         if (value==null) value = "";
         out += " "+item.nodeName+"=\""+value+"\"";
      }
   }
   out += ">\n";
   for (var i=0; i<node.childNodes.length; i++) {
      var item = node.childNodes.item(i);
      out = nodeToXML(item, indentation+"   ", out);
   }
   if (node.nodeValue!=null) 
      out += indentation+"   "+node.nodeValue+"\n";
   out += indentation+"</"+node.nodeName.toLowerCase()+">\n";
   return out;
}
function show() {
   var w = window.open('', 'Popup', '');
   w.document.write('<html><head><title>Document Dump</title>');
   w.document.write('</head><body><pre>');

   var s = nodeToXML(document, '', '');
   s = s.replace(new RegExp('&','g'),'&amp;');
   s = s.replace(new RegExp('<','g'),'&lt;');
   s = s.replace(new RegExp('>','g'),'&gt;');
   w.document.write(s);
   w.document.write('</pre></body></html>');
   w.document.close();
}

            </#text>
         </script>
      </head>
      <body>
         <#text>
            

         </#text>
         <script type="text/javascript">
            <#text>
               
   document.write('<p>Click to show document in a new window:</p>');

            </#text>
         </script>
         <p>
            <#text>
               Click to show document in a new window:

            </#text>
         </p>
         <#text>
            

         </#text>
         <form>
            <#text>
               

            </#text>
            <input type="button" onclick="show();" value="Show">
            </input>
            <#text>
               

            </#text>
         </form>
         <#text>
            

         </#text>
      </body>
   </html>
</#document>

Several notes about this FireFox 2.0 result:

There is a large extra empty "text" node between "title" and "script". I don't know where is come from.
Line breaks between HTML tags are preserved as empty "text" nodes.
The "p" node generated from the "document.write()" function in the short JavaScript in the "body" is inserted immediately after the "script" node.

Table of Contents

About This JavaScript Tutorial Example Book

Introduction to JavaScript

ECMAScript Language Specification and JavaScript Dialects

Data Types, Variables and Expressions

Flow Control Statements

Creating, Accessing, and Manipulating Arrays

Defining and Calling Functions

Web Browser Supporting JavaScript

Server-Side and Client-Side Web Scripting

Introduction to Objects

Defining Your Own Object Types