| Web Developer Resources | |
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.
- 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:
- Call the expose method passing a reference to the object whose internals you wish to view.
ex:
... (an html element example) ...
stuff inside the div
... (or a form input example using an event and a reference to itself) ...
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
|