如何在原始 DOM 和内容脚本更改的 DOM 之间切换？答案

【问题标题】：How to switch between original DOM and the DOM changed by a Content script?如何在原始 DOM 和内容脚本更改的 DOM 之间切换？
【发布时间】：2014-10-23 07:36:54
【问题描述】：

我正在制作一个更改页面 DOM 的 Chrome 扩展程序。但我想给用户一个选项，在更改前的页面和更改后的页面之间切换。

这有点像谷歌翻译，您可以在原始语言和翻译后的信息之间进行切换。

我在自己的搜索中找不到任何东西。

我知道 JavaScript 但还不知道 JQuery。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery dom google-chrome-extension

【解决方案1】：

您可以将整个正文保存在一个变量中，然后开始覆盖内容。如果你想切换回来加载旧的身体。

【讨论】：

感谢您的回答。但由于我是 javascript 的菜鸟，我如何在一个变量中放置一个洞 DOM，以及如何更改该变量的副本。因为 document.getElementbyId 可能不起作用。
不会只保存对body元素的引用吗？如果您确实尝试制作 DOM 的副本，您通常会丢失事件处理程序。

【解决方案2】：

您可以在运行内容脚本之前将所有原始 DOM 内容保存到一个变量中。您可以通过在内容脚本顶部使用以下代码来执行此操作：

var originalDOM = document.getElementsByTagName("*");

这会将整个 DOM 保存在一个名为 originalDOM 的数组中。 * 充当通用标签，请求文档中的每个标签。您可以阅读有关.getElementsByTagName() API here 的更多信息。

【讨论】：

但那些可能不是副本，而是对元素的引用。如果您在此之后修改 DOM 中的某些内容，那么 originalDOM 将包含相同的更改。此外，那个 particular 函数返回所有元素的列表，而不仅仅是所有元素的树。我不认为这是有用的。
@Xan 这是一个很好的观点。请参阅我的其他答案（我保留此答案仅供参考）。

【解决方案3】：

你可以试试：

var html = document.getElementsByTagName("html")[0];
var page = html.innerHTML;

这将为您提供<html> 标签之间的所有内容。注入内容脚本后，运行：

var newPage = html.innerHTML;

现在，只要您想在页面之间切换，只需运行：

html.innerHTML = page; //or newPage

您可以阅读更多关于 .getElementsByTagName() API here

【讨论】：

除非不会复制任何事件侦听器，或通过页面脚本（如 jQuery 数据）附加到元素的数据。
也就是说（以某种方式使答案无效），使用document.documentElement 而不是搜索。