Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tools to visualize an HTML document tree (DOM tree) [closed]

I want to visualize the document structure of a HTML website.

What I would like to have is something like this:

enter image description here

Are there any known tools that do this and where the results can be saved as a bitmap file?

like image 287
Benny Neugebauer Avatar asked Feb 16 '13 14:02

Benny Neugebauer


People also ask

Is HTML DOM a tree?

The HTML DOM Tree of Objects JavaScript can change all the CSS styles in the page. JavaScript can remove existing HTML elements and attributes. JavaScript can add new HTML elements and attributes. JavaScript can react to all existing HTML events in the page.

How do I access DOM tree?

The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.

What kind of graph is a DOM?

One way to represent the DOM is with a tree graph. A tree graph shows the relationship between parent and child objects, with lines between them representing their relationship. Take a family tree as an example.


1 Answers

I use LaTeX to create the DOM representation.

Here is a minimal working example:

\documentclass{scrreprt}
\usepackage{tikz-qtree}
\begin{document}

  \Tree[.table 
         [.thead 
           [.tr 
             [.th [.\textit{Vorname} ] ]
             [.th [.\textit{Nachname} ] ]
           ]
         ]              
         [.tbody 
           [.tr 
             [.td [.\textit{Donald} ] ]
             [.td [.\textit{Duck} ] ]
           ]
         ]
       ]

\end{document}

Which gives:

enter image description here

like image 92
Benny Neugebauer Avatar answered Sep 20 '22 11:09

Benny Neugebauer