可视化HTML文档树的工具（DOM树）

Question

我想要可视化HTML网站的文档结构。

我想拥有的是这样的：

是否有任何已知的工具可以执行此操作并将结果保存为位图文件？

Answer 1

我使用LaTeX创建DOM表示。

这是一个最小的工作示例：

\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}

给出了：

Answer 2

我刚尝试使用两个库。

首先，我使用Jsonml

将dom转换为JSON

var jsonData = JsonML.fromHTMLText(htmlData);

然后使用Json Editor或Json Viewer进行可视化

在jsFiddle中查看示例

1. Using Json Editor
2. Using Json Viewer

希望这可以帮到你。