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:

<!-- 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>');

   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;');
<script type="text/javascript">
   document.write('<p>Click to show document in a new window:</p>');
<input type="button" value="Show" onClick="show();"/>

The idea of this JavaScript is simple:

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

 Defining Your Own Object Types

 Inheritance of Properties and Methods through the Prototype Object Chain

 'jrunscript' - JavaScript Shell Command from JDK

 Using Functions as "Function" Objects

 Introduction to Built-in Object Types

W3C's Document Object Model (DOM) Specifications

 Overview of DOM Specifications

 DOM Level 0 - Example

 DOM Level 1 - Example

 DOM Level 2 - Example

 DOM Level 3 - Example

 DOM Level Test - document.implementation.hasFeature

 Inheritance vs. Flattened Views of the API

 A Web Document as A Tree of Different Interfaces

 A Web Document as A Tree of Nodes

Dump Document in a New Window - JavaScript Source

 Dump Document in a New Window - Firefox 2.0 Result

 Dump Document in a New Window - IE 6.0 Result


 PDF Printing Version