如何获取wep页面的DOM结构的快照？

Question

我需要在不同的点上比较网页的DOM结构。检索和快照它的方法有哪些。

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

我基本上需要跟踪网页的结构变化。例如移除div标签或插入p标签。更改这些标记上的数据(innerHTML)不应被视为不同之处。

Answer 1

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

• 通过HTTP GET
• 检索网页的快照保存具有不同名称的页面的连续快照，以便以后使用可识别HTML的比较工具(请参见HTML工具)来比较文件

作为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。

Answer 2

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

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

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

Answer 3

如果你使用firefox，firebug允许你查看任何网页的DOM结构。