如何在原始DOM和由內容腳本更改的DOM之間切換？

我正在製作一個Chrome擴展程序，用於更改頁面的DOM。但我想給用戶一個選擇，在更改前的頁面和更改的頁面之間切換。如何在原始DOM和由內容腳本更改的DOM之間切換？

這有點像谷歌翻譯，你可以在原始語言和翻譯的信息之間切換。

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

我知道JavaScript，但不是JQuery。

感謝您的幫助。

2014-08-29 Phinux

你可以將整個身體保存在一個變量中，然後開始覆蓋事物。如果你想切換加載舊的身體。

2014-08-31 04:59:00 anderspitman

謝謝你的回答。但是，因爲我是javascript的noob，如何在一個變量中放置一個洞DOM，以及如何更改該變量的副本。因爲document.getElementbyId可能不起作用。 – Phinux 2014-08-31 18:43:25

這不會僅僅保存對body元素的引用嗎？如果您嘗試製作DOM的副本，則通常會丟失事件處理程序。 – Xan 2014-09-01 09:39:40

在運行內容腳本之前，您可以將所有原始DOM內容保存到變量中。您可以通過使用下面的代碼在你的內容腳本的頂部做到這一點：

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

這節省稱爲originalDOM數組整個DOM。 *充當通用標籤，請求文檔中的每個標籤。您可以閱讀更多關於.getElementsByTagName() API here的信息。

2014-09-03 20:28:09 Kootling

但這些可能不是副本，而是引用元素。如果在此之後修改了DOM中的某些內容，那麼'originalDOM'將包含相同的更改。此外，_particular_函數返回所有元素的列表，而不僅僅是所有元素的樹。我不認爲這是有用的。 – Xan 2014-09-03 21:54:21

@Xan這是一個很好的觀點。看到我的其他答案（我保留這個答案僅供參考）。 – Kootling 2014-09-03 22:09:27

你可以嘗試：

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

這會給你的<html>標籤之間的一切。內容腳本注入後，運行：

var newPage = html.innerHTML;

現在，只要你想在頁面之間切換，只需運行：

html.innerHTML = page; //or newPage

你可以閱讀更多有關.getElementsByTagName（）API here

2014-09-03 22:09:04 Kootling

除了不會複製任何事件偵聽器，或通過頁面的腳本（如jQuery數據）附加到元素的數據。 – Xan 2014-09-03 22:10:58

也就是說（以某種方式使答案失效），使用'document.documentElement'而不是搜索。 – Xan 2014-09-03 22:12:08

回答