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

Posted 2023-02-21

【中文标题】如何将 DOM 状态重置为初始状态（第一次收到页面时？）

【英文标题】：How to reset DOM state to the initial state (when page was firstly received?)

【发布时间】：2013-10-09 14:29:45

【问题描述】：

我通过一些 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 的默认值）。

【问题讨论】：

对象是通过引用传递的，你必须克隆。

我尝试使用 jQuery .clone(true,true) （第一个布尔值：克隆所有事件处理程序和数据，第二个布尔值：递归地克隆所有子对象）。但是由于某种原因它不起作用..？

.clone 用于 jQuery 集合，你需要 $.extend

有什么理由不只是重新加载文档？它将来自缓存并快速加载。

【参考方案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?

【讨论】：

所以一旦我这样做了，var initDocument = $.extend(true, , document); 以后如何将 DOM 文档恢复到这个状态？我应该这样做：document = $.extend(, initDocument); 吗？既然是深度克隆，是否也克隆了所有的 DOM 文档子文档，所以实际上是整个页面？

你可以使用document = initDocument来恢复DOM对象。不是页面的 DOM。

为什么它不是同一个“页面 DOM”？