我如何拍摄一个 wep 页面的 DOM 结构的快照？答案

【问题标题】：How can I take a snapshot of a wep page's DOM structure?我如何拍摄一个 wep 页面的 DOM 结构的快照？
【发布时间】：2011-04-21 18:21:43
【问题描述】：

我需要在不同点比较网页的 DOM 结构。检索和快照的方法是什么。

我需要服务器端的 DOM 进行处理。

我基本上需要跟踪网页的结构变化。比如去掉一个 div 标签，或者插入一个 p 标签。更改这些标签上的数据（innerHTML）不应被视为差异。

【问题讨论】：

是否需要将 DOM 返回到服务器端？
另外，您只需要 HTML 还是真的需要整个 DOM？您是否需要从当前浏览器页面捕获 DOM，还是通过其 URL 重新请求页面就足够了？
我需要 DOM，它需要与数据无关。
“数据不可知论”是什么意思？
数据不可知论，因为不关心数据。我只需要比较结构。不是整个 HTML 文档。

标签： php html dom

【解决方案1】：

$html_page = file_get_contents("http://awesomesite.com");
$html_dom = new DOMDocument();
$html_dom->loadHTML($html_page);

使用 PHP DOM。非常简单，实际上使用起来有点乐趣。 Reference

编辑：澄清后，更好的答案在于here。

【讨论】：

不错！那么如何比较两个 DOM 对象呢？
我基本上需要跟踪网页的结构变化。比如去掉一个 div 标签，或者插入一个 p 标签。更改这些标签上的数据（innerHTML）不应被视为差异。
您应该使用此数据更新您的问题，因为这超出了您最初拥有的数据。我可以很容易地告诉你如何检索 DOM，但我不知道有什么简单的方法可以让你比较 DOM。我可能最终会在基于最后一个实例的递归函数中自己迭代它。
@Codeacula：也许比较 DOM 的“简单”方法是遍历 DOM，以纯文本格式输出节点，然后使用差异？
如果您没有得到答案，一个“简单”的方法是使用像diff 这样的现成工具并将输出加载到程序中。

【解决方案2】：

在服务器端执行以下步骤：

通过 HTTP GET 检索网页快照
保存具有不同名称的页面的连续快照以供以后比较
使用支持 HTML 的 diff 工具比较文件（请参阅 HtmlDiff tool listing page on ESW wiki）。

作为 Linux shell 的概念验证示例，您可以按如下方式进行比较：

wget --output-document=snapshot1.html http://example.com/
wget --output-document=snapshot2.html http://example.com/
diff snapshot1.html snapshot2.html

您当然可以将这些命令封装到服务器端程序或脚本中。

对于 PHP，我建议您查看 daisydiff-php。它很容易提供一个 PHP 类，使您能够轻松地创建一个支持 HTML 的 diff 工具。示例：

<?
require_once('HTMLDiff.php');
$file1 = file_get_contents('snapshot1.html');
$file2 = file_get_contents('snapshot1.html');
HTMLDiffer->htmlDiffer( $file1, $file2 );
?>

请注意，使用 file_get_contents，您还可以从给定的 URL 检索数据。

请注意，DaisyDiff 本身是 very fine tool for visualisation of structural changes as well。

【讨论】：

我不希望对实际进行更改，而是远程检索它们并跟踪更改。
感谢您提供更多信息。我相应地改变了我的答案。关键是同样的方法也适用于仅服务器端的处理。
PHP，我提到它是一个标签，我想我应该更清楚。
我很佩服你帮助我的奉献精神。虽然我正在为一个奇怪的“无记忆”错误而苦苦挣扎，但我必须说我现在使用这个工具走上了正确的轨道。不过只是一个注释。该工具的实际解析语法是HTMLDiffer->htmlDiffer( $file1, $file2 );
感谢语法更正。祝你工作顺利。另外，如果您再次遇到麻烦，请询问更多详细信息或提出新问题！

【解决方案3】：

如果您使用 firefox，firebug 可以让您查看任何网页的 DOM 结构。

【讨论】：

我知道，但我需要在应用程序中实现并处理它。