如何将 DOM 状态重置为初始状态（第一次收到页面时？）

Question

我通过一些 js 库操作了网页 DOM，这些库改变了 onMouseup onMousedown 和 onMousemove 的行为，以及其他一些我无法确定的事情。

使用 DOM 检查器，我可以看到其中一些更改被设置为 main“文档”对象的属性。

所以，我想找出一种方法来存储，当页面加载时，“文档”对象的初始状态（或者可能存储整个 DOM？），以便以后我能够恢复它。

我对此的天真尝试：

var initial_state = document
document = initial_state

你猜怎么着？它没有用......所以......我需要知道什么以及我怎样才能正确地做到这一点？

更新：我现在知道 java 赋值是通过引用而不是通过值，所以现在我正在尝试使用 .extend()，但这个问题的重点在于是否，无论如何，我将能够在初始阶段（收到页面时）保存 DOM 的 完整状态，然后在第二次恢复它。完整状态是指 html、javascript 状态、对象属性和方法，因此当您恢复它时，DOM 与您第一次收到的完全相同。

我知道这可能很困难，并且可能需要与 javascript 代码状态的复杂性成正比的特定案例代码。但这会有所帮助，如果我能看到至少一个代码示例在最简单的情况下以正确的方式执行此操作（如在我的问题示例案例中，您会收到一些 html 和一些更改的 js），我将非常感激整个文档的 onMousedown 的默认值）。

Answer 1

因为 JavaScript 的工作原理（对象不是复制而是通过引用传递）initial_state var 刚刚存储了对 DOM 文档的引用。当 DOM 文档更新时，您的 initial_state var 将反映这些更改，因为它只是指向 DOM 文档的引用，而不是“单独”的对象。

要获得一个“真实”对象的副本，而不仅仅是对第一个对象的引用，您需要克隆。

如果你使用 jQuery，你可以使用 extend function 进行克隆

// for simple cloning
var initDoc = $.extend({}, document);

// for deep cloning
var initDocument = $.extend(true, {}, document);

如果您对使用 jQuery.extend() 不感兴趣，请查看有关在 JavaScript 中克隆对象的相关问题。

How do I correctly clone a JavaScript object?