mnewt/print_dom_tree1.js

## print_dom_tree1.js
<SCRIPT LANGUAGE="JavaScript">
<!--
// F. Permadi 2005.
// (C) F. Permadi
// Print DOM tree
////////////////////////////////////////////
// This function traverses the DOM tree of an element and prints the tree.
// This function called recursively until the DOM tree is fully traversed.
//
// Parameters:
// - targetDocument is where the tree will be printed into
// - currentElement is the element that we want to print
// - depth is the depth of the current element
//   (it should be 1 for the initial element)
////////////////////////////////////////////
function traverseDOMTree(targetDocument, currentElement, depth)
{
  if (currentElement)
  {
    var j;
    var tagName=currentElement.tagName;
    // Prints the node tagName, such as <A>, <IMG>, etc
    if (tagName)
      targetDocument.writeln("&lt;"+currentElement.tagName+"&gt;");
    else
      targetDocument.writeln("[unknown tag]");

    // Traverse the tree
    var i=0;
    var currentElementChild=currentElement.childNodes[i];
    while (currentElementChild)
    {
      // Formatting code (indent the tree so it looks nice on the screen)
      targetDocument.write("<BR>\n");
      for (j=0; j<depth; j++)
      {
        // &#166 is just a vertical line
        targetDocument.write("&nbsp;&nbsp;&#166");
      }
      targetDocument.writeln("<BR>");
      for (j=0; j<depth; j++)
      {
        targetDocument.write("&nbsp;&nbsp;&#166");
      }
      if (tagName)
        targetDocument.write("--");

      // Recursively traverse the tree structure of the child node
      traverseDOMTree(targetDocument, currentElementChild, depth+1);
      i++;
      currentElementChild=currentElement.childNodes[i];
    }
    // The remaining code is mostly for formatting the tree
    targetDocument.writeln("<BR>");
    for (j=0; j<depth-1; j++)
    {
      targetDocument.write("&nbsp;&nbsp;&#166");
    }
    targetDocument.writeln("&nbsp;&nbsp;");
    if (tagName)
      targetDocument.writeln("&lt;/"+tagName+"&gt;");
  }
}
////////////////////////////////////////////
// This function accepts a DOM element as parameter and prints
// out the DOM tree structure of the element.
////////////////////////////////////////////
function printDOMTree(domElement, destinationWindow)
{
  // Use destination window to print the tree.  If destinationWIndow is
  //   not specified, create a new window and print the tree into that window
  var outputWindow=destinationWindow;
  if (!outputWindow)
    outputWindow=window.open();

  // make a valid html page
  outputWindow.document.open("text/html", "replace");
  outputWindow.document.write("<HTML><HEAD><TITLE>DOM</TITLE></HEAD><BODY>\n");
  outputWindow.document.write("<CODE>\n");
  traverseDOMTree(outputWindow.document, domElement, 1);
  outputWindow.document.write("</CODE>\n");
  outputWindow.document.write("</BODY></HTML>\n");

  // Here we must close the document object, otherwise Mozilla browsers
  //   might keep showing "loading in progress" state.
  outputWindow.document.close();
}

//-->
</SCRIPT>

## print_dom_tree2.js
var d1;

/* Dump the DOM into a new window. */

function dump_dom ()
{
    if (typeof(Node) == "undefined") {
        alert ("Sorry, this script doesn't work with Internet Explorer.");
        return;
    }
    var w1 = window.open ("", 'DOM_output');
    d1 = w1.document;
    d1.open();
    d1.writeln ('<h1>Tree of nodes</h1>\n<ol>');
    traverse_nodes (document, '', 1);
    d1.writeln('</ol>');
    d1.close();
}

/* Possible types of nodes. */

var node_types = new Array (
    "FAKE NODE", // fix array offset
    "ELEMENT NODE",
    "ATTRIBUTE NODE",
    "TEXT NODE",
    "CDATA SECTION NODE",
    "ENTITY REFERENCE NODE",
    "ENTITY NODE",
    "PROCESSING INSTRUCTION NODE",
    "COMMENT NODE",
    "DOCUMENT NODE",
    "DOCUMENT TYPE NODE",
    "DOCUMENT FRAGMENT NODE",
    "NOTATION NODE"
);

/* Write out a value in a certain colour, if the value exists,
   otherwise do nothing. */

function write_value_colour (value, value_name, colour)
{
    if (value) {
        var safe_value =
            value.replace (/\n/g,'\\n').
                  replace (/</g, "&lt;").
                  replace (/>/g, '&gt;');
        d1.write(' <small>'+value_name+':</small> <font color="'+
                 colour+'">'+safe_value+'</font>');
    }
}

/* Traverse the sub-nodes of 'node' */

function traverse_nodes (node, num)
{
    if (node.nodeType == Node.ELEMENT_NODE)
        d1.write('<li><b>&lt;'+node.nodeName+'&gt;</b>');
    else
        d1.write('<li><b>'+node.nodeName+'</b>');
    // Write the node's ID, class name, and value if they exist.
    write_value_colour (node.id,        "id",    "red");
    write_value_colour (node.className, "class", "green");
    write_value_colour (node.nodeValue, "value", "purple");
    // If the node is not a text node or an element node, print its
    // type.
    if (node.nodeType != Node.TEXT_NODE &&
        node.nodeType != Node.ELEMENT_NODE) {
        var node_type = node_types[node.nodeType].toLowerCase ();
        d1.write(' <i>('+node_type+')</i> ');
    }
    if (node.attributes && node.attributes.length) {
        // Write the node's attributes, numbered A, B, C.
        d1.write('<ol type="A"> ')
        for (var i = 0; i < node.attributes.length; ++i)
            traverse_nodes (node.attributes.item(i),i);
        d1.write('</ol>')
    }
    if (node.childNodes && node.childNodes.length) {
        // Write the node's child nodes, numbered 1, 2, 3.
        d1.write('<ol>')
        for (var i = 0; i < node.childNodes.length; ++i)
            traverse_nodes (node.childNodes.item(i), i);
        d1.write('</ol>')
    }
    d1.write("</li>\n");
}
	<SCRIPT LANGUAGE="JavaScript">
	<!--
	// F. Permadi 2005.
	// (C) F. Permadi
	// Print DOM tree
	////////////////////////////////////////////
	// This function traverses the DOM tree of an element and prints the tree.
	// This function called recursively until the DOM tree is fully traversed.
	//
	// Parameters:
	// - targetDocument is where the tree will be printed into
	// - currentElement is the element that we want to print
	// - depth is the depth of the current element
	// (it should be 1 for the initial element)
	////////////////////////////////////////////
	function traverseDOMTree(targetDocument, currentElement, depth)
	{
	if (currentElement)
	{
	var j;
	var tagName=currentElement.tagName;
	// Prints the node tagName, such as <A>, <IMG>, etc
	if (tagName)
	targetDocument.writeln("<"+currentElement.tagName+">");
	else
	targetDocument.writeln("[unknown tag]");

	// Traverse the tree
	var i=0;
	var currentElementChild=currentElement.childNodes[i];
	while (currentElementChild)
	{
	// Formatting code (indent the tree so it looks nice on the screen)
	targetDocument.write("<BR>\n");
	for (j=0; j<depth; j++)
	{
	// &#166 is just a vertical line
	targetDocument.write("  &#166");
	}
	targetDocument.writeln("<BR>");
	for (j=0; j<depth; j++)
	{
	targetDocument.write("  &#166");
	}
	if (tagName)
	targetDocument.write("--");

	// Recursively traverse the tree structure of the child node
	traverseDOMTree(targetDocument, currentElementChild, depth+1);
	i++;
	currentElementChild=currentElement.childNodes[i];
	}
	// The remaining code is mostly for formatting the tree
	targetDocument.writeln("<BR>");
	for (j=0; j<depth-1; j++)
	{
	targetDocument.write("  &#166");
	}
	targetDocument.writeln("  ");
	if (tagName)
	targetDocument.writeln("</"+tagName+">");
	}
	}
	////////////////////////////////////////////
	// This function accepts a DOM element as parameter and prints
	// out the DOM tree structure of the element.
	////////////////////////////////////////////
	function printDOMTree(domElement, destinationWindow)
	{
	// Use destination window to print the tree. If destinationWIndow is
	// not specified, create a new window and print the tree into that window
	var outputWindow=destinationWindow;
	if (!outputWindow)
	outputWindow=window.open();

	// make a valid html page
	outputWindow.document.open("text/html", "replace");
	outputWindow.document.write("<HTML><HEAD><TITLE>DOM</TITLE></HEAD><BODY>\n");
	outputWindow.document.write("<CODE>\n");
	traverseDOMTree(outputWindow.document, domElement, 1);
	outputWindow.document.write("</CODE>\n");
	outputWindow.document.write("</BODY></HTML>\n");

	// Here we must close the document object, otherwise Mozilla browsers
	// might keep showing "loading in progress" state.
	outputWindow.document.close();
	}

	//-->
	</SCRIPT>
	var d1;

	/* Dump the DOM into a new window. */

	function dump_dom ()
	{
	if (typeof(Node) == "undefined") {
	alert ("Sorry, this script doesn't work with Internet Explorer.");
	return;
	}
	var w1 = window.open ("", 'DOM_output');
	d1 = w1.document;
	d1.open();
	d1.writeln ('<h1>Tree of nodes</h1>\n<ol>');
	traverse_nodes (document, '', 1);
	d1.writeln('</ol>');
	d1.close();
	}

	/* Possible types of nodes. */

	var node_types = new Array (
	"FAKE NODE", // fix array offset
	"ELEMENT NODE",
	"ATTRIBUTE NODE",
	"TEXT NODE",
	"CDATA SECTION NODE",
	"ENTITY REFERENCE NODE",
	"ENTITY NODE",
	"PROCESSING INSTRUCTION NODE",
	"COMMENT NODE",
	"DOCUMENT NODE",
	"DOCUMENT TYPE NODE",
	"DOCUMENT FRAGMENT NODE",
	"NOTATION NODE"
	);

	/* Write out a value in a certain colour, if the value exists,
	otherwise do nothing. */

	function write_value_colour (value, value_name, colour)
	{
	if (value) {
	var safe_value =
	value.replace (/\n/g,'\\n').
	replace (/</g, "<").
	replace (/>/g, '>');
	d1.write(' <small>'+value_name+':</small> <font color="'+
	colour+'">'+safe_value+'</font>');
	}
	}

	/* Traverse the sub-nodes of 'node' */

	function traverse_nodes (node, num)
	{
	if (node.nodeType == Node.ELEMENT_NODE)
	d1.write('<li><b><'+node.nodeName+'></b>');
	else
	d1.write('<li><b>'+node.nodeName+'</b>');
	// Write the node's ID, class name, and value if they exist.
	write_value_colour (node.id, "id", "red");
	write_value_colour (node.className, "class", "green");
	write_value_colour (node.nodeValue, "value", "purple");
	// If the node is not a text node or an element node, print its
	// type.
	if (node.nodeType != Node.TEXT_NODE &&
	node.nodeType != Node.ELEMENT_NODE) {
	var node_type = node_types[node.nodeType].toLowerCase ();
	d1.write(' <i>('+node_type+')</i> ');
	}
	if (node.attributes && node.attributes.length) {
	// Write the node's attributes, numbered A, B, C.
	d1.write('<ol type="A"> ')
	for (var i = 0; i < node.attributes.length; ++i)
	traverse_nodes (node.attributes.item(i),i);
	d1.write('</ol>')
	}
	if (node.childNodes && node.childNodes.length) {
	// Write the node's child nodes, numbered 1, 2, 3.
	d1.write('<ol>')
	for (var i = 0; i < node.childNodes.length; ++i)
	traverse_nodes (node.childNodes.item(i), i);
	d1.write('</ol>')
	}
	d1.write("</li>\n");
	}