有没有一种方法可以保存JavaScriptDOM操作

Is there a way to save JavaScript DOM manipulations?

本文关键字：保存 JavaScriptDOM 操作 方法 一种 有没有      更新时间：2023-09-26

例如，如果JavaScript对一个表执行了一系列操作，那么新的HTML将无法通过View->Source看到。是否有一些方法可以捕获JavaScript操作并将所有内容保存为纯HTML文档？

最简单的方法是调用

document.documentElement.outerHTML

这将获得与视图源相同的输出，只是它将使所有DOM操作都可见。然而，它可能会缺少DOCTYPE。我意识到Webkit控制台正在打印doctype fine，但没有公共的API来获取doctype，所以您必须自己打印。

一个小书签，你可以添加到浏览器中查看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链接）。

您可以在像Firebug或IE Developer工具这样的DOM检查器中查看它

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

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

我知道这个问题很老了，但我发现了一种使用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操作）。

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

相关文章：