有没有保存JavaScript DOM操作的方法？

Question

例如，如果JavaScript对表执行大量操作，则新的HTML将不会通过“视图”->“源”显示。 有什么方法可以捕获JavaScript操作并将所有内容保存为纯HTML文档？

Answer 1

最简单的方法是打电话

document.documentElement.outerHTML

这将获得与视图源相同的输出，除了它将具有所有可见的DOM操作。 但是，它可能会缺少DOCTYPE。 我意识到Webkit控制台可以很好地打印doctype，但是没有用于获取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

您可以在Firebug或IE Developer工具等DOM检查器中查看它

Answer 3

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

Answer 4

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

假设所有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操作中（显然并不能jsdom保存DOM操作）。

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

Answer 5

您可以使用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