无法弄清楚如何使用 Html Agility Pack 读取网页的特定部分

Question

我正在尝试阅读网站（www.joindota.com）的特定部分，该部分具有相同的值。我将使用该网站的示例解释我想要执行的操作：

以下 HTML 是我想要从该网站读取的内容的一部分：

<div id="matchticker_coverage_content_1761" style="display:none;">
    <a href="http://www.joindota.com/en/matches/16102-team-dignitas-dota-vs-sk-gaming-dota" class="item">
        <div class="sub" style="width: 18px; text-align: left;"><img src="http://www.gs-media.de/img/themes/joindota/ticker_9.png" border="0" alt="" /></div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/ro.gif" border="0" alt="ro" title="Romania" /> Digni</div>
        <div class="sub" style="width: 20px;">vs.</div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/dk.gif" border="0" alt="dk" title="Denmark" /> SK</div>
        <div class="sub" style="float: right; text-align: right;">
            <span title="Sun, 29.01.2012, 16:00 CET">tomorrow</span>
        </div>
        <div class="cl"></div>
    </a>
    <a href="http://www.joindota.com/en/matches/16101-world-elite-vs-mineski" class="item">
        <div class="sub" style="width: 18px; text-align: left;"><img src="http://www.gs-media.de/img/themes/joindota/ticker_9.png" border="0" alt="" /></div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/cn.gif" border="0" alt="cn" title="China" /> WE</div>
        <div class="sub" style="width: 20px;">vs.</div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/ph.gif" border="0" alt="ph" title="Philippines" /> Mski</div>
        <div class="sub" style="float: right; text-align: right;">
            <span title="Sun, 29.01.2012, 14:00 CET">tomorrow</span>
        </div>
        <div class="cl"></div>
    </a>
    ....
</div>

我想读取

中的所有内容

我只需要读取我在那里提供的

标签内的所有值。例如，它将输出：

• Digni vs. SK
• WS vs. Mski
• EG vs. Fnatic
• 等。

该 HTML 中的所有 div 值都是相同的，我只需要知道如何“选择”

具体在页面中，并读取该 div 中的所有其他 div，即：

<div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/ro.gif" border="0" alt="ro" title="Romania" /> Digni</div>
div class="sub" style="width: 20px;">vs.</div>
                        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/dk.gif" border="0" alt="dk" title="Denmark" /> SK</div>

所有

值是相同的，我感兴趣的是其中的文本，例如 Digni、vs. 和 SK。

我只需要读取

中的所有这些值

原因是因为该网站有很多这样的内容，但我只需要阅读特定的部分。这是同一页面上的另一个部分，它是相同的，只是所有其他 div 所在的 div 不同。

示例：

<div id="matchticker_coverage_content_1596" style="display:none;">
    <a href="http://www.joindota.com/en/matches/16564-westernwolves-vs-panzer" class="item">
        <div class="sub" style="width: 18px; text-align: left;"><img src="http://www.gs-media.de/img/themes/joindota/ticker_9.png" border="0" alt="" /></div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/fr.gif" border="0" alt="fr" title="France" /> Wolves</div>
        <div class="sub" style="width: 20px;">vs.</div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/de.gif" border="0" alt="de" title="Germany" /> PANZER</div>
        <div class="sub" style="float: right; text-align: right;">
            <span title="Tue, 31.01.2012, 21:00 CET">31.01.</span>
        </div>
        <div class="cl"></div>
    </a>
    <a href="http://www.joindota.com/en/matches/16626-panzer-vs-just-4-the-tournament" class="item">
        <div class="sub" style="width: 18px; text-align: left;"><img src="http://www.gs-media.de/img/themes/joindota/ticker_9.png" border="0" alt="" /></div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/de.gif" border="0" alt="de" title="Germany" /> PANZER</div>
        <div class="sub" style="width: 20px;">vs.</div>
        <div class="sub" style="width: 103px;"><img src="http://www.gs-media.de/img/flags/de.gif" border="0" alt="de" title="Germany" /> J4T</div>
        <div class="sub" style="float: right; text-align: right;">
            <span title="Sun, 29.01.2012, 19:00 CET">tomorrow</span>
        </div>
        <div class="cl"></div>
    </a>
    ....
</div>

请注意开头

中的所有

是如何完全相同的？所有

所在的

是

与页面的其他部分不同，其中

我的最终问题是，如何选择包含另一个

的开头

>，并阅读我之前提到的那些具体内容？

Answer 1

网络爬行/蜘蛛抓取，无论是否是 语义 HTML，对于特定数据点（如与谷歌等一般相关性搜索相反），更多的是艺术而不是科学。

您通常需要专门针对您想要抓取的每个网站定制您的抓取工具，以便获取与您想要从中获取相同数据点的数据每个站点，但每个站点以不同的方式表示它们。

考虑到这一点，这通常是一种发现模式的练习，可以让您在某个站点内一致地识别数据点。

我冒昧地砍掉你的 HTML 示例，并对其进行格式化以显示标签的层次结构；这不会影响页面的解析或显示方式，因为它是关于标签内的内容，而不是标签外的内容。

通过重新排列，图案应该出现。

让我们首先识别容器

元素。唯一标识这些

元素的是 id 属性，它们的形式都是：（

<div id="matchticker_coverage_content_**some number**" style="display:none;">

注意：您可以看看对于任何具有 style="display:none;" 属性的

元素，但这非常脆弱，并且不是唯一标识容器，可以应用该属性任何地方否则并且具有没有语义）

不幸的是，id属性是一个问题，因为它的结尾似乎是一个数字是某种 id，并且在整个页面中不一致。如果您知道容器的 ID，则可以在 Html Agility Pack 中使用以下表达式：

\\div[id='matchticker_coverage_content_1596']

但我想您不知道它。

您真正想要的是能够查找

元素，其中id属性以开头matchticker_coverage_content_。

Html Agility Pack 不支持这种选择器语法。但是， jQuery 确实 使用以下语法：

div[id^='matchticker_coverage_content_']

更好的是 fizzler 项目 确实 支持此选择器。因此，在这种情况下，我将使用 fizzler 来获取该容器。

一旦有了容器，就需要查看它的子元素了。同样，编辑后，很明显您要查找的每个匹配（带有相关的

元素）都包含在锚点内（即

>) 元素。因此，一旦有了容器

，您就可以使用以下语法简单地选择其所有子元素作为锚元素：（

/a

或者只是 a 的选择器在容器节点上（如果使用 fizzler）

一旦有了它，您实际上不需要检测 vs.，您可以假设它在那里，您确实想要检测玩家。

这些更难，因为标签、类或 id 没有任何语义。然而，有一个歧视因素。查看播放器标签（我删除了其中一些标签以使其更清晰）：

<div class="sub">
    <img src="http://www.gs-media.de/img/themes/joindota/ticker_9.png" 
        border="0" alt="" /></div>

<div class="sub">
    <img src="http://www.gs-media.de/img/flags/ro.gif" 
        border="0" alt="ro" title="Romania" /> Digni</div>

<div class="sub" style="width: 20px;">vs.</div>

<div class="sub" style="width: 103px;">
    <img src="http://www.gs-media.de/img/flags/dk.gif" 
        border="0" alt="dk" title="Denmark" /> SK</div>

您可以看到播放器位于

标签中，该标签有一个子 <; img> 标记，其中 alt 属性不为空（这很重要，因为您不想处理第一个

; 元素）。

一旦识别出这些 标签，您就可以简单地获取父节点（

）并从节点中获取文本来获取播放器。第一个是第一个玩家方，您处理的第二个是第二个玩家方。

另一种方法是识别包含“vs.”的

元素。文本，然后看兄弟姐妹，前面的是第一玩家，后面的是第二玩家。

请注意，最后一步非常脆弱，并且它永远会很脆弱，因为标签中没有语义指示符。您本质上取决于实现细节（因为您别无选择）。

我强烈建议您在某些页面周围设置测试用例，在其中解析内容并验证数据；这样，如果页面结构发生变化，您会立即知道并可以相应地更改您的抓取逻辑。