javascript - 如何将 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 将反射(reflect)这些更改，因为它只是指向 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?