DOM structure parser

/*************************************************************************************
                         DOM tree structure parsing script
                      Written by Mark Wilton-Jones - Feb 2003
**************************************************************************************

Please see http://www.howtocreate.co.uk/jslibs/ for details of this script
Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use

Produces a tree view of the DOM for a chosen document - similar to Mozilla's DOM inspector

THIS CAN ONLY BE USED WITH DOM COMPATIBLE BROWSERS

To use:
Insert this inbetween the <head> tags:
	<script type="text/javascript" language="javascript1.2" src="PATH_TO_SCRIPT/domTree.js"></script>

To produce the tree, use:
	showDomTree(ref_to_element_to_start_from_-_usually_document.documentElement)
	in theory, you should be able to use document, but IE does not support that, so use
	document.documentElement

The function will return the HTML code required to produce the nested list format tree
structure.
When an item in the nested list is clicked on, its className changes to 'highlighted',
so you can define that class to produce a highlight effect. I suggest something like
.highlighted { background-color: #456; color: #fff; border-top: 2px solid #000; border-bottom: 2px solid #000; }
At the same time, the function 'handleAttributes' is run. It is passed an object
containing all attributeName -> attributeValue pairs for each attribute of the selected
object. By default, the function will alert a message giving all attribute pairs, but
you can change this if you want using
	<script type="text/javascript" language="javascript1.2" src="PATH_TO_SCRIPT/domTree.js"></script>
	<script type="text/javascript" language="javascript1.2"><!--
	function handleAttributes(oObject) {
		//do something with oObject
	}
	//--></script>
____________________________________________________________________________________*/

function showDomTree(topElement,topCode) {
	var outStr = ''; topCode = topCode ? topCode : '0';
	if( !topElement ) { outStr = 'Error, no top level element supplied.'; }
	else if( typeof( topElement.nodeType) == 'undefined' ) { outStr = 'Error, browser is not DOM compliant.'; }
	else {
		if( topElement.attributes ) {
			var elAttr = '';
			if( topElement.className ) { elAttr += 'this.totalInfo[\'className\']=unescape(\''+escape(topElement.className)+'\');'; }
			for( var x = 0; topElement.attributes[x]; x++ ) { if(topElement.attributes[x].nodeValue){
					elAttr += 'this.totalInfo[unescape(\''+escape(topElement.attributes[x].nodeName)+'\')]=unescape(\''+escape(topElement.getAttribute(topElement.attributes[x].nodeName))+'\');';
			} }
			for( var x in topElement.style ) { if(topElement.style[x]&&topElement.style[x]!='false'){
					elAttr += 'this.totalInfo[unescape(\'style.'+escape(x)+'\')]=unescape(\''+escape(topElement.style[x])+'\');';
			} }
		} else { var elAttr = 'this.totalInfo.nodeValue=unescape(\''+escape(topElement.nodeValue)+'\');'; }
		if( topCode == '0' ) { outStr += '<ul>'; }
		outStr += '<li>'+(topElement.firstChild?('<a href="#" onclick="disTog(\''+topCode+'\',this);return false;">[+]</a> '):'')+'<span onclick="if(window.MWJactEl){window.MWJactEl.className=\'\';}window.MWJactEl=this;this.className=\'highlighted\';this.totalInfo = new Object();'+elAttr+'if(window.handleAttributes){handleAttributes(this.totalInfo);}">'+((topElement.nodeName=='!')?'#comment':topElement.nodeName)+'</span>';
		if( topElement.firstChild ) {
			outStr += '<ul id="'+topCode+'" style="display:none;">';
			for( var x = 0; topElement.childNodes[x]; x++ ) {
				outStr += showDomTree( topElement.childNodes[x], topCode+'_'+x );
			}
			outStr += '</ul>';
		}
		outStr += '</li>';
		if( topCode == '0' ) { outStr += '</ul>'; }
	}
	return outStr;
}
function disTog(id,el) { el.innerHTML = ( el.innerHTML.indexOf( '+' ) + 1 ) ? '[-]' : '[+]'; document.getElementById(id).style.display = document.getElementById(id).style.display ? '' : 'none'; }
function handleAttributes(ob) { var theStr = ''; for( var x in ob ) { theStr += ( theStr ? '\n' : '' ) + x + ' = ' + ob[x]; } alert(theStr); }