pyspider爬虫教程(1):HTML和CSS选择

虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息。但是感觉还是需要一篇 step by step
的教程,不然没有一个总体的认识。不过,没想到这个教程居然会变成一篇译文,在这个爬虫教程系列文章中,会以实际的例子,由浅入深讨论爬取(抓取和解析)的一些关键问题。

在 教程一 中,我们将要爬取的网站是豆瓣电影:http://movie.douban.com/

你可以在: http://demo.pyspider.org/debug/tutorial_douban_movie 获得完整的代码,和进行测试。

开始之前

由于教程是基于 pyspider 的,你可以安装一个 pyspider(Quickstart,也可以直接使用 pyspider 的 demo 环境: http://demo.pyspider.org/。

你还应该至少对万维网是什么有一个简单的认识:

  • 万维网是一个由许多互相链接的超文本页面(以下简称网页)组成的系统。
  • 网页使用网址(URL)定位,并链接彼此
  • 网页使用 HTTP 协议传输
  • 网页使用 HTML 描述外观和语义

所以,爬网页实际上就是:

  • 找到包含我们需要的信息的网址(URL)列表
  • 通过 HTTP 协议把页面下载回来
  • 从页面的 HTML 中解析出需要的信息
  • 找到更多这个的 URL,回到 2 继续

选取一个开始网址

既然我们要爬所有的电影,首先我们需要抓一个电影列表,一个好的列表应该:

  • 包含足够多的电影的 URL
  • 通过翻页,可以遍历到所有的电影
  • 一个按照更新时间排序的列表,可以更快抓到最新更新的电影

我们在 http://movie.douban.com/ 扫了一遍,发现并没有一个列表能包含所有电影,只能退而求其次,通过抓取分类下的所有的标签列表页,来遍历所有的电影: http://movie.douban.com/tag/

创建一个项目

在 pyspider 的 dashboard 的右下角,点击 “Create” 按钮

替换 on_start 函数的 self.crawl 的 URL:


  1. @every(minutes=24 * 60) 
  2.  
  3. def on_start(self): 
  4.  
  5.     self.crawl('http://movie.douban.com/tag/', callback=self.index_page)  
  • self.crawl 告诉 pyspider 抓取指定页面,然后使用 callback 函数对结果进行解析。
  • @every 修饰器,表示 on_start 每天会执行一次,这样就能抓到最新的电影了。

点击绿色的 run 执行,你会看到 follows 上面有一个红色的 1,切换到 follows 面板,点击绿色的播放按钮:

Tag 列表页

在 tag 列表页 中,我们需要提取出所有的 电影列表页 的 URL。你可能已经发现了,sample handler 已经提取了非常多大的 URL,所有,一种可行的提取列表页 URL 的方法就是用正则从中过滤出来:


  1. import re 
  2.  
  3. ... 
  4.  
  5.   
  6.  
  7.     @config(age=10 * 24 * 60 * 60) 
  8.  
  9.     def index_page(self, response): 
  10.  
  11.         for each in response.doc('a[href^="http"]').items(): 
  12.  
  13.             if re.match("http://movie.douban.com/tag/\w+", each.attr.href, re.U): 
  14.  
  15.                 self.crawl(each.attr.href, callback=self.list_page)  

由于 电影列表页和 tag列表页长的并不一样,在这里新建了一个 callback 为 self.list_page

  • @config(age=10 * 24 * 60 * 60) 在这表示我们认为 10 天内页面有效,不会再次进行更新抓取
  • 由于 pyspider 是纯 Python 环境,你可以使用 Python 强大的内置库,或者你熟悉的第三方库对页面进行解析。不过更推荐使用 CSS选择器。

电影列表页

再次点击 run 让我们进入一个电影列表页(list_page)。在这个页面中我们需要提取:

  • 电影的链接,例如,http://movie.douban.com/subject/1292052/
  • 下一页的链接,用来翻页

CSS选择器

CSS选择器,顾名思义,是 CSS 用来定位需要设置样式的元素 所使用的表达式。既然前端程序员都使用 CSS选择器 为页面上的不同元素设置样式,我们也可以通过它定位需要的元素。你可以在 CSS 选择器参考手册 这里学习更多的 CSS选择器 语法。

在 pyspider 中,内置了 response.doc 的 PyQuery 对象,让你可以使用类似 jQuery 的语法操作 DOM 元素。你可以在 PyQuery 的页面上找到完整的文档。

CSS Selector Helper

在 pyspider 中,还内置了一个 CSS Selector Helper,当你点击页面上的元素的时候,可以帮你生成它的 CSS选择器 表达式。你可以点击 Enable CSS selector helper 按钮,然后切换到 web 页面:

开启后,鼠标放在元素上,会被黄色高亮,点击后,所有拥有相同 CSS选择器 表达式的元素会被高亮。表达式会被插入到 python 代码当前光标位置。创建下面的代码,将光标停留在单引号中间:


  1. def list_page(self, response): 
  2.  
  3.     for each in response.doc('').items():  

点击一个电影的链接,CSS选择器 表达式将会插入到你的代码中,如此重复,插入翻页的链接:


  1. def list_page(self, response): 
  2.  
  3.     for each in response.doc('HTML>BODY>DIV#wrapper>DIV#content>DIV.grid-16-8.clearfix>DIV.article>DIV>TABLE TR.item>TD>DIV.pl2>A').items(): 
  4.  
  5.         self.crawl(each.attr.href, callback=self.detail_page) 
  6.  
  7.     # 翻页 
  8.  
  9.     for each in response.doc('HTML>BODY>DIV#wrapper>DIV#content>DIV.grid-16-8.clearfix>DIV.article>DIV.paginator>A').items(): 
  10.  
  11.         self.crawl(each.attr.href, callback=self.list_page)  
  • 翻页是一个到自己的 callback 回调

电影详情页

再次点击 run,follow 到详情页。使用 css selector helper 分别添加电影标题,打分和导演:


  1. def detail_page(self, response): 
  2.  
  3.     return { 
  4.  
  5.         "url": response.url, 
  6.  
  7.         "title": response.doc('HTML>BODY>DIV#wrapper>DIV#content>H1>SPAN').text(), 
  8.  
  9.         "rating": response.doc('HTML>BODY>DIV#wrapper>DIV#content>DIV.grid-16-8.clearfix>DIV.article>DIV.indent.clearfix>DIV.subjectwrap.clearfix>DIV#interest_sectl>DIV.rating_wrap.clearbox>P.rating_self.clearfix>STRONG.ll.rating_num').text(), 
  10.  
  11.         "导演": [x.text() for x in response.doc('a[rel="v:directedBy"]').items()], 
  12.  
  13.     } 

注意,你会发现 css selector helper 并不是总是能提取到合适的 CSS选择器 表达式。你可以在 Chrome Dev Tools 的帮助下,写一个合适的表达式:

右键点击需要提取的元素,点击审查元素。你并不需要像自动生成的表达式那样写出所有的祖先节点,只要写出那些能区分你不需要的元素的关键节点的属性就可以了。不过这需要抓取和网页前端的经验。所以,学习抓取的最好方法就是学会这个页面/网站是怎么写的。

你也可以在 Chrome Dev Tools 的 Javascript Console 中,使用 $$(a[rel="v:directedBy"]) 测试 CSS Selector。

开始抓取

  • 使用 run 单步调试你的代码,对于用一个 callback 最好使用多个页面类型进行测试。然后保存。
  • 回到 Dashboard,找到你的项目
  • 将 status 修改为 DEBUG 或 RUNNING
  • 按 run 按钮 

作者:佚名

来源:51CTO

时间: 2024-07-31 22:32:29

pyspider爬虫教程(1):HTML和CSS选择的相关文章

pyspider爬虫教程 (2):AJAX和HTTP

在上一篇教程<pyspider 爬虫教程 (1):HTML 和 CSS 选择>中,我们使用 self.crawl API 抓取豆瓣电影的 HTML 内容,并使用 CSS 选择器解析了一些内容.不过,现在的网站通过使用 AJAX 等技术,在你与服务器交互的同时,不用重新加载整个页面.但是,这些交互手段,让抓取变得稍微难了一些:你会发现,这些网页在抓回来后,和浏览器中的并不相同.你需要的信息并不在返回 HTML 代码中. 在这一篇教程中,我们会讨论这些技术 和 抓取他们的方法. AJAX AJAX

CSS选择符详解

核心提示:什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是.如下: body {}div {}p {}span {} 二.群组选择符 对于XHMTL对象,可以对一组同时进行了相同的样式指派.使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构

轻松学DIV教程(div+css布局)

css|教程 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align=left等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我

DOM基础教程之使用DOM + Css

 这篇文章主要介绍了DOM基础教程之使用DOM + Css,需要的朋友可以参考下     1.使用getElementsByTagName修改class类别或者追加类别   代码如下: <ul class="name1" onclick="clickz()"> <p>第一个</p> <p>第一个</p> <p>第一个</p> <p>第一个</p> </u

请写出对以下三组CSS选择符的理解:#test, .test, .test.subTest.

问题描述 请写出对以下三组CSS选择符的理解:#test, .test, .test.subTest. 解决方案 #test: id选择器 应用到id为test元素上.test:类选择器 通过指定元素class名称为test,应用该样式.test .subTest 表示一种样式的层次结构 eg<div class="test"> <div class="subTest"></div></div> 亲,看看中意否?

新手学习网站优化系列教程三:程序的选择

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 前面讲了<新手学习网站优化系列教程一:域名的选择>和<新手学习网站优化系列教程二:空间的选择>,今天来讲解第三课,程序的选择.据笔者所说,很多个人站长的程序源码都是从网络上下载下来的,因为大部分的个人站长都没有太多的时间专注于自己写源码程序,这花费大量的时间不说,也很难做得到.所以,与其花这么多时间在写程序上面,不如直

node+express制作爬虫教程_node.js

最近开始重新学习node.js,之前学的都忘了.所以准备重新学一下,那么,先从一个简单的爬虫开始吧. 什么是爬虫 百度百科的解释: 爬虫即网络爬虫,是一种自动获取网页内容的程序.是搜索引擎的重要组成部分,因此搜索引擎优化很大程度上就是针对爬虫而做出的优化. 通俗一点讲: 把别人网站的信息给弄下来,弄到自己的电脑上.然后再做一些过滤,比如筛选啊,排序啊,提取图片啊,链接什么的.获取你需要的信息. 如果数据量很大,而且你的算法又比较叼,并且可以给别人检索服务的话,那么你的爬虫就是一个小百度或者小谷歌

CSS中级教程&amp;nbsp;class和id选择符

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现. 你当然可以用类选择符class和标识选择符id来定义自己的选择符. 这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素. 在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前. 看起来像这样:  代码如下 复制代码 #top {  background-color: #ccc;  padding: 1em  }  .intro {  color: red;  fon

CSS基础 CSS选择符_基础教程

示例: *[lang=fr] { font-size:14px; width:120px; }  *.div { text-decoration:none; }  2.类型选择符 语法: E { sRules }  说明: 类型选择符.以文档语言对象(Element)类型作为选择符. 示例: td { font-size:14px; width:120px; }  a { text-decoration:none; }  3.属性选择符 语法: E [ attr ] { sRules }  E