Graphical DOM Analysis for Websites

This looks like a nice way to analyze the DOM structure of websites:

PhotoMeister.com Graphical DOM Structure

The graph above shows the analysis of http://www.photomeister.com

The colors used for the nodes are:

blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

It comes to no surprise that google.com has a very clean DOM structure:

Google.com DOM Map

The developer of the tool has more samples on his website.

This link takes you directly to the tool.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: