如何将DOM状态重置为初始状态（页首首次收到？） [英] How to reset DOM state to the initial state (when page was firstly received?)

问题描述

我通过一些js库操纵了一个网页DOM，这些js库改变了在$ M $ c $ onMouseup onMousedown 和 onMousemove ，其中我不能确定的。

使用DOM检查器我可以看到其中一些更改被设置为主document对象的属性。

所以，我想要找出的是一种存储页面加载时的方式，可以是document对象的初始状态（或者可能存储整个DOM？）所以后来我将能够恢复它。

我的天真尝试：

  var initial_state = document 
 document = initial_state 
  

它没有工作...所以...我需要知道什么，我该怎么做呢？

更新：我现在知道java作业是通过引用而不是值的，所以现在我正在尝试使用.extend（），但是这个问题的重点是不管什么，无论如何，我将能够保存在初始阶段（页面收到时）的DOM的完整状态，然后再次恢复。完整的状态我的意思是HTML，JavaScript的状态，对象的属性和方法，所以当你恢复它，DOM是完全一样的你第一次收到。

我明白这可能很困难，可能需要特定于案例的代码与JavaScript代码状态复杂性成正比。但是这将有所帮助，如果我能够看到至少一个代码示例，在最简单的情况下以正确的方式进行处理，我将非常感激（在我的问题示例中，您收到一些html并且只是一些js更改

解决方案

因为JavaScript如何工作（对象不被复制，而是通过引用传递） code> initial_state var刚刚存储了对DOM文档的引用。当DOM文档更新时，您的 initial_state var将反映这些更改，因为它只是指向DOM文档的引用，而不是自己的对象。

要获取作为真实对象的对象的副本，而不仅仅是对第一个对象的引用，您需要克隆

如果您使用jQuery，可以使用扩展功能

  //用于简单克隆
 var initDoc = $ .extend（{} ，文件）; 
 
 //深入克隆
 var initDocument = $ .extend（true，{}，document）; 
  

如果您不想使用jQuery.extend（），请查看有关克隆的相关问题

如何正确克隆JavaScript对象？

I manipulated a webpage DOM via some js libraries which altered the behaviour of onMouseup onMousedown and onMousemove, among other things which I can't be sure of.

Using a DOM inspector I could see that some of these changes are set as properties of the main "document" object.

So, what I am trying to figure out is a way to store, when the page is loaded, the initial state of the "document" object (or probably store the entire DOM?) so that later I will be able to restore it.

My naive attempt at this:

var initial_state = document
document = initial_state

Guess what? It didn't work... So... what do I need to know and how could I do it right?

UPDATE: I am aware now that java assignment is by reference and not by values so now I am now experimenting with .extend(), but the main point of this question is on wheter or not, by any means, I will be able to save the full state of the DOM at its initial stage (when page is received) and then restore it at a second time. By full state I mean html, javascript state, object properties and methods so that when you restore it, the DOM is exactly the same as the one you received first time.

I understand that this can be difficult and can require case specific code directly proportional to the complexity of the javascript code state. But it would help and I would be extremely grateful if I could see at least a code example for doing it the right way in the simplest of the cases (as in my question example case, where you receive some html and just some js that changes default values for onMousedown for the whole document).

解决方案

Because how JavaScript works (objects are not copied but passed by reference) initial_state var has just stored the reference to the DOM document. When the DOM document is updated your initial_state var will reflect those changes because it's just a reference which is just pointing at the DOM document, and not an object "on its own".

To obtain a copy of an object which is a "real" object and not just a reference to the first object, you need to clone.

If you use jQuery you can clone by using extend function

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

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

If you are not interested in using jQuery.extend() please take a look this related question on cloning object in JavaScript.

How do I correctly clone a JavaScript object?

这篇关于如何将DOM状态重置为初始状态（页首首次收到？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！