How to reset the DOM to its original state (when was the page first received?)

Question

I manipulated the DOM of web pages through some js libraries that changed the behavior of onMouseup onMousedown and onMousemove , among other things, which I cannot be sure of.

Using the DOM inspector, I saw that some of these changes are set as properties of the main document object.

So, what I'm trying to figure out is a way to save the initial state of the "document" object (or probably save the entire DOM?) When loading the page, so that I can restore it later.

My naive attempt:

 var initial_state = document document = initial_state 

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

UPDATE : now I know that java is assigned by reference, not by value, so now I am experimenting with .extend (), but the main thing is, in any way, I can save the full state of the DOM at the initial stage (when the page is received), and then restore it a second time. In full state, I mean html, javascript state, properties and methods of the object, so when you restore it, the DOM will be exactly the same as the one you received for the first time.

I understand that this can be difficult and may require specific code of a specific code, directly proportional to the complexity of the state of the javascript code . But that would help, and I would be extremely grateful if I could see at least a sample code for the correct path in the simplest case (as in my example with an example example where you get some html and only some js that change values ​​by default for onMousedown for the entire document).

Answer 1

Since JavaScript works (objects are not copied, but passed by reference) initial_state var just saved a link to a DOM document. When the DOM document is updated, your initial_state var will reflect these changes, because it is just a link that just points to the DOM document, and not an "independent" object.

To get a copy of an object that is a “real” object, and not just a reference to the first object, you need clone .

If you use jQuery, you can clone using extend function

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

If you're not interested in using jQuery.extend (), take a look at this related question about cloning an object in JavaScript.

How to clone a JavaScript object correctly?