Show DOM Tree II bookmarklet

Well, Steve over at slayeroffice has updated his Document Tree Chart, after both he and I put together a solution to Molly Holtzshlag’s thoughts on producing a DOM tree from an active document. We’ve gone beyond that stage now, though, I think; Steve’s latest iteration has many cool extra features, like highlighting, colour coding, and transparency (since, unlike mine, he creates it in the window containing the document you’re examining).

And then he finishes up by throwing down the gauntlet to me to leapfrog him again, which is very unfair indeed given that I have to be at work in, like, six hours.

Show DOM Tree II

New features:

A better layout
My major problem with my last attempt was that the layout, while correct (ish) was difficult to comprehend because a full DOM tree for a given HTML page is considerably wider than the browser. To counter this, I’ve flipped the layout through 90 degrees. (You’ll see what I mean when you see it.)
Element highlighting
Stolen shamelessly from Steve, when you mouse over an element in the tree, that element is highlighted in grey in both the tree and the source document.
Element visibility
When you mouse over an element, it also scrolls the source document so that that element is visible.
Since the tree is massive on any reasonably sized document, it starts out collapsed. You can expand and collapse branches of the tree to concentrate just on the area you care about.
Fully visible text nodes
One advantage with the 90 degree flip of the node list is that we can now display the full text of any text node, and indeed we do so.

It probably only works in Mozilla. If it works in anything else consider it a bonus. Let me know if there are bugs, but, unlike Steve, I do not promise at all to fix them…

Steve: bring it on. ;-)

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)