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.
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
Previous article: ThinkLemon Reset: Part 1 – Bye bye CSS Next article: Get Firebug!
Related Articles
- No related posts
No comments yet.