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

Question

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

我希望能得到像这样的结果: 有没有已知的工具可以做到这点并将结果保存为位图文件？

- Benny Code

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}

这将会得到：

- Benny Code

Answer 2

我刚刚尝试使用了两个库。

首先，我使用Jsonml将dom转换为JSON。

var jsonData = JsonML.fromHTMLText(htmlData);

然后使用Json Editor或Json Viewer对其进行可视化操作。

在jsFiddle中查看样例：

1. 使用Json Editor
2. 使用Json Viewer

希望这可以帮助您。

- Sen Jacob

---

GitHub的原始URL无法使用。您应该进行更改。在此处查看更多信息：https://dev59.com/qWQm5IYBdhLWcg3wyhZE#18049842 - Kunukn