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

Question

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

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

我找到了许多循环遍历 DOM 的解决方案，但没有一个能保持结构。

图片中显示了一个示例

有谁知道如何在 Javascript 中完成结果？

标签： javascriptdom

Answer 1

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

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

假设<h3>是 body 的第一个孩子：

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

现在去旁边<P>

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

接下来，您将很容易地遍历到它的孩子，就像上面提到的那样。

我希望这可能会有所帮助！