.net - 无法弄清楚如何使用 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>

我想阅读来自 <div id="matchticker_coverage_content_1761" > 的所有内容

我只需要读取 <div> 中的所有值我在那里提供的标签。例如，它会输出:

迪尼VS. SK

WS vs. Mski

EG vs. Fnatic

等

该 HTML 中的所有 div 值都相同，我只需要知道如何“选择” <div id="matchticker_coverage_content_1761" >特别是在页面中，并读取该 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>

所有的 <div>值是相同的，我感兴趣的只是其中的文本，例如 Digni 和 vs. 以及 SK。

我只需要读取 <div id="matchticker_coverage_content_1761" > </div> 中的所有这些值

原因是因为该网站有很多这样的内容，但我只需要阅读特定部分。这是同一页面上的另一部分是相同的，只有所有其他 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>

注意所有 <div>开头完全一样 <div> ?那个 <div>凡 <div>在是 <div id="matchticker_coverage_content_1596" style="display:none;">这与页面的其他部分不同，它是 <div id="matchticker_coverage_content_1761" style="display:none;">
我的最终问题是，如何选择开头 <div>持有另一个 <div> ，并阅读我之前提到的那些具体内容？

Answer 1

网络爬虫/爬虫，无论是semantic HTML与否，对于特定的数据点(相对于像谷歌这样的一般相关搜索)，与其说是科学，不如说是艺术。

您经常需要专门为要抓取的每个站点定制抓取工具，以便获取数据，因为您希望从每个站点获取相同的数据点，但每个站点以不同的方式表示它们。

考虑到这一点，通常是发现模式的练习，这将使您能够一致地识别某个站点内的数据点。

我冒昧chopping down your HTML samples, as well as formatting it显示标签的层次结构；这不会影响页面的解析或显示方式，因为它是关于标签中的内容，而不是标签之外的内容。

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

让我们来识别容器 <div>元素第一。唯一标识这些的东西<div>元素是 id属性，它们都是以下形式:

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

(注意:您可以查找具有 <div> 属性的任何 style="display:none;" 元素，但这非常脆弱，并且不能唯一标识容器，该属性可以应用于其他任何地方并且没有语义意义)

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

\\div[id='matchticker_coverage_content_1596']

但我想你不知道。

您真正想要的是能够查找所有 <div>元素所在 id属性以 matchticker_coverage_content_ 开头.

Html Agility Pack 不支持这种选择器语法。然而， jQuery does使用以下语法:

div[id^='matchticker_coverage_content_']

更好的是 fizzler project是否 support this selector .所以在那种情况下，我会使用 fizzler 来获取那个容器。

一旦你有了容器，那就是查看它的子元素的问题。同样，在编辑之后，很明显您要查找的每个匹配项(具有相关的 <div> 元素)都包含在一个 anchor (即 <a> )元素中。所以一旦你有了容器 <div> ，您可以使用以下语法简单地选择所有属于 anchor 元素的子元素:

/a

(或者如果使用 fizzler，则只是容器节点上的 a 选择器)

一旦你有了它，你就不需要检测对局了，你可以假设它就在那里，你真的想检测球员。

这些更难，因为标签、类或 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>

可以看到玩家在 <div>有 child 的标签 <img>标签所在 alt属性不为空(这很重要，因为您不想处理第一个 <div> 元素)。

一旦你确定了那些 <img>标签，您可以简单地获取父节点( <div> )并从节点中获取文本以获取您的播放器。第一个是第一个玩家方，您处理的第二个是第二个玩家方。

另一种方法是识别 <div>包含“vs.”的元素里面的文字，然后看 sibling ，在前的是第一个玩家，而在后的是第二个玩家。

注意，最后一步是非常脆弱的，它总是脆弱的，因为标签中没有语义指示符。您基本上取决于实现细节(因为您别无选择)。

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