Expose those DOM objects real quick

I was wearing my DHTML hat the other day and wanted to share this javascript quick tip.  When I have to script DOM objects but don’t have time to figure out their goings on, I like to dump them via a for() loop.  Here’s how it works.

In my html file I’ll create this small script.

<script type="text/javascript">
function dump( objId )
{
	var domObj = document.getElementById( objId );

	// message holder
	var str = "";
	// loop
	for( xx in domObj )
	{
		// append to the message
		str += xx + " : " + domObj[ xx ] + "\n\n";

		// how long is the message?
		if( str.length >= 300 )
		{
			// show it
			alert( str );

			// reset it
			str = "";
		}
	}

}
</script>

Next I’ll drop an html button into my page that passes the id of my desired object to the dump.

<button onClick="dump('parentform')">dump</button>

Lastly I’ll fire up my html file, click the dump button, and hope I find what I’m looking for in the alert.

dump popup

I don’t always find what I’m looking for, but I always end up finding interesting stuff. Especially when you run the same html file in different browsers.  I wrote a similar javascript dumper that writes to the page instead of an alert.  This one is also interesting to see in different browsers.