Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
print dom tree
<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>
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");
}
@HolzAndrew

This comment has been minimized.

Copy link

commented Jun 9, 2016

Hi Matthew-

Im a new developer and am curious how you instantiate this?

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.