如何在操作后重置DOM？

Question

我的页面包含一些使用jQuery构建的小巫师。

我想给用户提供重新启动/重置向导并从开始级别开始的选项。

有没有办法在不刷新页面的情况下实现它？

- Yair Nevet

Answer 1

实现这一目标的一种方法是在向导的初始状态下克隆（）其元素树，并将其存储在全局变量或文档的data中：

$(document).data("initialWizard", $("#yourWizard").clone(true));

（请注意，将true传递给clone()也会克隆元素数据和事件处理程序，在您的情况下可能会很方便。）

然后，当您想要将向导恢复到其原始状态时，可以执行以下操作：

$(document).data("initialWizard").replaceAll("#yourWizard");

- Frédéric Hamidi

---

在网络上找到的最好的清洁解决方案。太棒了！ - Julian Xhokaxhiu

Answer 2

唯一的方法在不刷新页面的情况下重新开始，是手动将DOM返回到页面加载时的状态，并还原任何JavaScript状态。您要么必须记录/记住初始状态，以便可以返回到该状态，要么跟踪所有增量更改，以便也可以返回到那里。

如果您真的想重新开始，刷新有什么问题吗？

- jfriend00

---

这也是一个不错的解决方案，但我想避免再次发布页面。 - Yair Nevet

@Yair - 你为什么想要避免重新加载页面？它应该从缓存中加载，速度非常快。 - jfriend00

@jfriend00，您如何“记录”初始状态？您是否能够用它覆盖正在运行的DOM？这是否也会完全恢复对象的状态（初始事件处理程序等）到首次接收时的状态？ - Redoman

@jj_ - 从纯JavaScript来说，你不能很容易地保存/恢复DOM的任意状态（事件处理程序、变量状态、自定义属性等）。原始问题的上下文假定您知道原始状态是什么，并且可以编写代码通过JavaScript从头开始创建该状态或将当前对象更改回所需状态。可以遍历DOM层次结构并保存层次结构的快照，然后重新创建类似的层次结构，但前提是您已经知道需要哪些事件处理程序和变量状态。 - jfriend00

@jfriend00 我问这个问题是因为在一个类似的问题中，我正在尝试恢复DOM，在我的情况下，我确切地知道原始状态是什么。实际上，它不能更简单：我想恢复为完全未编写脚本的页面提供的“默认” DOM 的状态！如果您愿意，请在此处检查：http://stackoverflow.com/questions/19149917/how-to-reset-dom-state-to-the-initial-state-when-page-was-firstly-received/19149976#19149976 - Redoman

同时，在记录DOM状态的更改（突变）方面：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver - Redoman

Answer 3

类似于上面的方法，这是我最终采取的做法。我将整个jQuery文档内容存储在一个bootup()函数中（并运行它）。body的初始内容存储在一个originalDOM变量中。然后，在其中我有一个playAgain函数，它会将body的内容设置为originalDOM，并通过调用bootup()函数再次运行整个jQuery内容。所有这些都将由单击类“.startover”的按钮触发。

bootup();
    var bootup = function(){$(document).ready(function(){
    var originalDOM=document.body.innerHTML;
    //jQuery lines of code here
    var playAgain = function(){
        $(".startover").click(function(){
            document.body.innerHTML = originalDOM;
            bootup();
        });
    };
    playAgain();

});};

希望这对寻找类似内容的人有所帮助，如果有任何可以改进的地方，欢迎提出反馈意见！

- Christopher Kennedy