如何在原始 DOM 和内容脚本更改的 DOM 之间切换？
Posted
技术标签:
【中文标题】如何在原始 DOM 和内容脚本更改的 DOM 之间切换？【英文标题】：How to switch between original DOM and the DOM changed by a Content script? 【发布时间】：2014-10-23 07:36:54 【问题描述】：我正在制作一个更改页面 DOM 的 Chrome 扩展程序。但我想给用户一个选项，在更改前的页面和更改后的页面之间切换。
这有点像谷歌翻译，您可以在原始语言和翻译后的信息之间进行切换。
我在自己的搜索中找不到任何东西。
我知道 javascript 但还不知道 JQuery。
感谢您的帮助。
【问题讨论】：
【参考方案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 而不是搜索。以上是关于如何在原始 DOM 和内容脚本更改的 DOM 之间切换？的主要内容，如果未能解决你的问题，请参考以下文章