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

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

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

我找到了许多通过DOM循环的解决方案，但没有一个能够保持这种结构

图中显示了一个示例

---

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

您可以尝试使用DOM导航到HTML文档，方法是首先将整个HTML文档放入一个变量中，并使用以下命令：

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

假设

是身体的第一个孩子，那么：

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

现在转到

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

body.firstChild.nextSibling//将返回

接下来，您将很容易地遍历到上面提到的子对象

我希望这会有帮助

到目前为止你还记得吗？