Scrapy——理解HTML和XPath

HTML、DOM树以及XPath

从用户在浏览器输入URL到屏幕显示的过程。

  • 在浏览器输入URL。URL的第一部分用于在网络上找到合适的服务器,而URL以及cookie等其他数据则构成一个请求,用于发送到那台服务器中。
  • 服务器回应,向浏览器发送一个HTML页面。也可能返回其他格式,比如XML和JSON。
  • 将HTML转换成浏览器内部的树状表示形式:文档对象模型。
  • 基于一些布局规则渲染内部表示,达到你所在屏幕上的视觉效果。

URL
URL分为两个主要部分。第一个部分通过域名系统(DNS)帮助我们在网络上定位合适的服务器。URL的剩余部分对于服务器理解请求是什么。它可能是一张图片、一个文档,或是需要出发某个动作的东西。
HTML文档
服务端读取URL,理解我们的请求是什么,然后返回一个HTML文档。该文档实质上就是一个文本文件,我们可以使用TextMate、Notepad、vi或Emacs打开它。
树表示法
每个浏览器都有自身复杂的内部结构,凭借它来渲染网页。DOM表示法具有跨平台、语言无关性等特点,并且被大所属浏览器所支持。想要在Chrome中查看网页的树表示法,可以右键单击你感兴趣的元素,然后点击Inspect Element,需要注意的是,HTML只是文本,而树表示法是浏览器内存里的对象,可以通过编程的方式查看并操作它。

使用XPath选择HTML元素

通过一种称为XPath的语言选择并抽取元素、属性和文本。这种语言专门为此设计。
例子文本

<html>

<head>
    <meta charset="utf-8" />
    <title class='title'>网页标题</title>

</head>

<body>
    <h1 id='my_h1'>标题1</h1>
    <p class='my_p'>段落1</p>
    <p class='my_p'>段落2</p>
    <span>25.00</span>
    <span>255.00</span>
    <div>
        <span>25.00</span>
        <p>qwer</p>
    </div>
    <div>
        <span>225.00</span>
        <p>qwer</p>
    </div>

</body>

</html>

语法

表达式描述
nodename选取此节点的所有子节点
/从根结点选取
//从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置
.选取当前节点
选取当前节点的父节点
@选取属性


|路径表达式|描述| |-|-| |html|选取html元素的所有子节点| |/html|选取根元素html,如果路径起始于斜杠(/),则此路径始终代表到某元素的绝对路径| |html/body|选取属于html的子元素的所有body元素| |//body|选取所有body子元素,而不管它们在文当中的位置| |//@class|选取名为class的所有属性|
|路径表达式|描述| |-|-| |//body/p[1]|选取属于body子元素的第一个p元素| |//body/p[last()]|选取属于body子元素的最后一个p元素| |//body/p[last()-1]|选取属于 body子元素的倒数第二个p元素| |//body/p[position()<3]|选取属于body子元素的前两个p元素| |//title[@class']|选取所有拥有名为class的属性的title元素| |//title[@class='title']|选取所有title元素,且这些元素拥有值为tilte的class| |/html/body[span>35.00]|选取html元素的所有body元素,且其中的span元素的值须大于35.00| |/html/body[span>35.00]/p|选取 html 元素中的 body元素的所有 p元素,且其中的 span 元素的值须大于 35.00| |//h1[@id="my_h1"]/text()|选择id为my_h1的h1标签下的text|
通配符描述
*匹配任何元素节点
@*匹配任何属性节点
node()匹配任何类型的节点
通过在路径表达式中使用‘’运算符,可以选取若干个路经

浏览器中
为了在浏览器中使用XPath,需要单击Developer Tools的Console标签,并使用$x()工具函数。
这里写图片描述
这里写图片描述
使用scrapy在命令行选择

scrapy shell http://example1.com
>>> response.xpath('/html/head/title').extract()
[u'<title>Example 1</title>']
>>> response.xpath('//a/text()').extract()
[u'Burke', u'RGB to Hex', u'Portia Doubleday', u'Example1']
>>> 

或取XPath表达式
我使用的火狐浏览器,安装四个插件Firebug、FirePath、User Agent Switcher、xpath finder。
右上角菜单——>Adds-ons(附件)——>Get Adds-ons
下载你想添加的插件。
这里写图片描述
重启浏览器
单击右键选择Firebug,选择元素,查看FirePath。

这里写图片描述

预见变化
如果HTML发生变化后,就会使XPath表达式失效。一些简单规则可以帮助我们减少表达式失效的可能性。

  • 避免使用数组索引,因为这些数字最终将会孩子像不同的元素。
  • 类并不好用,这些属性一般用通过CSS影响页面外观,因此可能会由于网站布局的微小变更而产生变化。
  • 有意义的面向数据的类要比具体或者面向布局的类更好。因为在布局发生变化时,后者更可能保持有效。
  • ID通常是最可靠的。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值