Help with JavaScript DOM

Update: This was written before built-in browser tools for debugging JavaScript and DOM were any good. And of course these days firebug is awesome! So why keep this? The information here is still relevant (I feel) mainly because being able to introspect (meaning, enumerate and reveal the --actual-- instantiated value of a thing at that moment) is a "level-up" concept for anyone doing development. If you deconstruct the techniques the expose.js library is using, that's what it's doing.

As a developer, it seems like I run into cases when I need to quickly check to see what properties or methods are available for a particular HTML tag, embedded Flash, or ActionScript, or a JavaScript function or object. I've never found the end all be all DOM resource. There are a lot of good ones, but in the case of books they seem too far removed from specific browser implementations (or I forgot to pack it). Online references have tended to be documentation oriented (which is different than introspection oriented.) I've seen some libraries, but they seem overly feature laden, or painful to implement. These days plugins are popular, such as firebug... it's great for testing a specific browser, but if you want to interrogate the instantiated object properties a variety of different browsers expose through their own implemented interpretation and DOM standards, it's still hard to beat a library such as this.

Since I've never really discovered someone else's resource that I love, I've tended to write my own, ...each time. After iterations of writing functions to expose DOM elements via JavaScript, I finally managed to abstract the elements into their own reusable library, and located them in a place I've been able to find again (a super useful feature for a resource espousing itself as "reusable" as it turns out).

Better still, it's super simple to find and use. Professing myself as a critic of, uh, myself it seems my own litmus test for how useful something is depends on how many iterations it takes before I don't maintain it any longer, or abandon it all together. At this point, I've logged years on this one, and use it on an almost daily basis... hopefully that bodes well. Since there's really only one way to find out, I thought I'd share it and request feedback. I'm open to feature suggestions, but it's errors I'm really curious about.

Here's how to use it.

  1. Include a remote script include to load it when you want to use it. (Please don't leave it in your script's after you're done debugging, at least if you choose to call it from my web host ;-)
    ex: <script src=""></script>
  2. Call the expose method passing a reference to the object whose internals you wish to view.
    ex: ... (an html element example) ... <div id="mydiv">stuff inside the div</div> <script>expose(document.getElementById('mydiv'))</script> ... (or a form input example using an event and a reference to itself) ... <form name="myform"> <input name="myinput" onchange="expose(this)">

Here are a few example pages using expose.js to enumerate properties:

Related Keywords: How to expose DOM elements with javascript, introspect, enumerate, browser, implementation