有没有办法保存JavaScript DOM操作？

Question

例如，如果JavaScript对表执行大量操作，则通过View - ＆gt;将无法看到新的HTML。资源。有没有办法捕获JavaScript操作并将所有内容保存为纯HTML文档？

Answer 1

最简单的方法是致电

document.documentElement.outerHTML

这将获得与视图源相同的输出，除了它将显示所有DOM操作。但它可能会错过DOCTYPE。我意识到Webkit控制台正在打印文档类型，但是没有用于获取DOCTYPE的公共API，因此您必须自己完成。

您可以添加到浏览器中以查看dom的小书签：

javascript:(function(){win=open(%22about:blank%22,%20%22View%20DOM%20Source%22,%20%22menubar=no,resizable=yes,status=no,toolbar=no%22);win.document.write(%22<pre>%22%20+%20document.documentElement.outerHTML.split(%22&%22).join(%22&amp;%22).split(%20%22<%22).join(%22&lt;%22).split(%22>%22).join(%22&gt;%22)%20+%20%22</pre>%22);win.focus();})()

（抱歉，无法发布Javascript链接）。

Answer 2

您可以在像Cloudbug或IE Developer tools

这样的DOM检查器中查看它

Answer 3

您可以使用prompt("test",document.body.innerHTML);并复制＆amp;粘贴内容。

Answer 4

您可以使用innerHTML访问表格的序列化当前状态。

var table = document.getElementById("mytable");

table.innerHTML; // "<tbody><tr><td>..."

table.parentNode.innerHTML; // gets the serialization of the whole table, including the <table> tag

Answer 5

我知道这个问题已经很老了，但是我遇到了一种使用shell.js来捕获和保存DOM操作的方法，如果有人感兴趣的话，我会在这里列出。

假设所有DOM操作都已完成。 在那之后。

var shell = require('shelljs');
var data = window.document.getElementsByTagName('html')[0].innerHTML;
shell.echo(data).to("your/original/file.html");

那很简单。 我发现它特别适用于与jsdom相关的node.js相关DOM操作（显然不能单独保存DOM操作）。

注意：这将覆盖原始文件。