Dump Document in a New Window - JavaScript Source

JavaScript Tutorials - Herong's Tutorial Examples - Version 2.21, by Dr. Herong Yang

JavaScript Tutorials - Herong's Tutorial Examples

∟W3C's Document Object Model (DOM) Specifications

∟Dump Document in a New Window - JavaScript Source

This section provides a tutorial example of JavaScript to dump the browser built-in 'document' object as an XML message in new browser window by using DOM API attributes and methods.

To summarize what I have learned about DOM API specifications so far, I wrote a JavaScript page to dump the browser built-in "document" object with DOM attributes and methods, DOM_HTML_Document_Dump.html:

<html>
<head>
<!-- DOM_HTML_Document_Dump.html
   Copyright (c) 2013 by Dr. Herong Yang, herongyang.com
-->
<title>Dump HTML Document in New Window</title>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<script type="text/javascript">
   document.write('<p>Click to show document in a new window:</p>');
</script>
<form>
<input type="button" value="Show" onClick="show();"/>
</form>
</body>
</html>

The idea of this JavaScript is simple:

Walk through the document tree with recursive function nodeToXML().
For each node, dump it as XML element. The node name becomes the element name. Node attributes become element attributes. The node child list becomes the element child list. The node value becomes the element content.
The dumped XML string is then displayed in a new window.

Read next sections to see result from Firefox and IE.

Table of Contents

About This 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