转储整个 DOM 树（包括事件监听器和突变观察器）答案

【问题标题】：Dump the whole DOM tree (including event listeners and mutation observers)转储整个 DOM 树（包括事件监听器和突变观察器）
【发布时间】：2015-07-12 17:57:23
【问题描述】：

我有运行时由 javascript 构建的 html 页面。在某个时刻，我想创建此页面的备份以便以后能够恢复它。页面由 DOM 描述，因此在逻辑上保存 DOM 本身是合乎逻辑的。问题是 - 似乎没有合法的方法可以这样做。

我只找到了只能用于序列化 html 的 XMLSerializer 接口（所以，这不是正确的工具）。但是我需要保存突变观察者和事件监听器，这样“恢复”的页面会表现得像它的祖先一样。

我还考虑过通过 DOM 记录文件以记录 javascript 操作。但是在运行时自己构建的页面又大又复杂，所以这种方法会花费很多时间。

有什么想法吗？

【问题讨论】：

没有什么神奇的方法可以做到这一点 - 跟踪您安装的观察者/事件侦听器（制作数组日志）并将其添加到您的转储中。
通常这样做的方式是你不专门保存页面的 HTML 和事件监听器，而是当你用 JS 构建页面时，你构建一个状态对象来描述什么已对页面进行了处理。然后，您编写可以读取该状态对象的代码，以同样的方式重建页面。如果你真的很好，你可以让重建代码和第一次构建页面的代码一样。
您可以将问题想象为用于维护撤消堆栈的代码。撤消堆栈通常不会在每次更改后保存文档的整个状态，而是保存修改页面的增量命令/数据，您只需重新应用（或在撤消的情况下通过反转）这些命令即可返回到任何特定状态.您可以对 DOM 的更改执行相同的操作。您保存的命令级别越高，通常需要存储的数据就越少。

标签： javascript dom dump

【解决方案1】：

包括监听器在内的所有信息都存储在窗口对象中。你可以检查它：console.log(window)。

要转储窗口对象，只需将其复制并发送到 api 进行存储。

【讨论】：

没有。侦听器不存储在 window 对象上。另外，您能否描述一种可靠的方法来序列化window（复制并发送）？ JSON.stringify 不起作用。
我在 stackoverflow 上找到了另一个 post。有一个 sn-p 可以对更复杂的对象进行字符串化。但是你对事件监听器的权利。否则，您必须在创建和恢复备份时将它们放入队列中，您可以重新初始化存储的事件侦听器。
是的，您可以使用such 进行字符串化，但是当您需要DOM（应该序列化为XML，而不是JSON）时，实际上没有理由对window 进行字符串化