Visualising the DOM for fun


The Document Object Model, or DOM as it is known better, is usually visualised as a tree. For instance with the Internet Explorer Developer Toolbar or DOM Inspector / Firebug for Firefox. But there are other more fun ways, like Aharef did.

Thinklemon DOM graph

The above graph is a funky representation of ‘all’ nodes in the HTML of the ThinkLemon homepage. The blue dots represent links (<a>), the orange ones block-level elements like <p> & <blockquote>, the grey ones probably are list-items (<li>), etc. The grey blob at the lower-left presumably is the meta-info in the <head>, whereas the grey/blue extensions to the right and top is all the navigational stuff found at the bottom of these pages.

See Aharef: Websites as graphs for a further explanation and a chance to play with it yourself. And when you’re fed up you can also take a look at that other visualiser, GoogleBrowser.

Via: Fredscapes


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.