开幕标签内的元素

Question

我正在写一个蜘蛛，使用scrapy下载subreddit首页上的所有图像。为此，我必须找到图像链接以从中下载图像并使用CSS或XPath选择器。

检查后，会提供链接，但所有这些链接的HTML都是这样的：

<div class="expando expando-uninitialized" style="display: none" data-cachedhtml=" <div class="media-preview" id="media-preview-7lp06p" style="max-width: 861px"> <div class="media-preview-content"> <a href="https://i.redd.it/29moua43so501.jpg" class="may-blank"> <img class="preview" src="https://i.redditmedia.com/Q-LKAeFelFa9wAdrnvuwCMyXLrs0ULUKMsJTXSf3y34.jpg?w=861&amp;s=69085fb507bed30f1e4228e83e24b6b2" width="861" height="638"> </a> </div> </div> " data-pin-condition="function() {return this.style.display != 'none';}"><span class="error">loading...</span></div>

据我所知，看起来所有新元素都在<div>元素的开始标记内初始化。你能解释一下这里到底发生了什么，以及如何从中提取图像信息？

*抱歉，我不太确定如何正确格式化html代码，但格式化并不是太多，因为无论如何它都是一个大标签。

Answer 1

如何阅读受损属性data-cachedhtml

HTML很乱。尝试使用 How to parse invalid (bad / not well-formed) XML? 中列出的技术，以便在使用XPath之前获得可行的标记。可能需要三次通过：

1. 清理标记混乱。
2. 获取data-cachedhtml。
的属性值
3. 使用XPath提取图像链接。

XPath部分

对于此形式的去除data-chachedhtml：

<div class="media-preview" id="media-preview-7lp06p" style="max-width: 861px">
  <div class="media-preview-content">
    <a href="https://i.redd.it/29moua43so501.jpg" class="may-blank">
      <img class="preview" src="https://i.redditmedia.com/elided"
           width="861" height="638"/>
    </a>
  </div>
  <span class="error">loading...</span>
</div>

1. 此XPath将检索预览图像链接：

   //a/img/@src
   

   （即src元素img元素的所有a属性。）

或

1. 此XPath将检索点击图片链接：

   //a[img]/@href
   

   （即具有href孩子的a元素的所有img属性。）