Javascript将所有DOM元素打印/可视化为保持其结构的节点树

Question

花了几个小时寻找正确的答案后，我决定在这里问一个问题。

我想可视化/打印HTML文档的整个文档对象模型（DOM），而不用“展平”其结构。

我发现许多解决方案可以遍历DOM，但是没有一个保持结构。

图片中显示了一个例子

有人知道如何用Javascript完成结果吗？

Answer 1

您可以尝试使用DOM导航到HTML文档，方法是先将整个html文档放在一个变量中，方法如下：

var myDoc = document.documentElement;
vary body = myDoc.firstChild.nextElementSibling; //returns body

假设<h3>是身体的第一个孩子，则：

body.firstChild; 
body.firstChild.firstChild; //Text Node

现在要转到<P>

旁边

body.firstChild.nextSibling; //would return <p> 

接下来，您将轻松地像上面提到的那样遍历其子级。

我希望这会有所帮助！