网页结构的简介和Xpath语法的入门教程

相信很多小伙伴已经听说过Xpath，之前小编也写过一篇关于Xpath的文章，感兴趣的小伙伴可以戳这篇文章如何利用Xpath抓取京东网商品信息以及Python网络爬虫四大选择器（正则表达式、BS4、Xpath、CSS）总结。今天小编继续给大家介绍一些Xpath知识点，希望对大家的学习有帮助。

1、Xpath让我们可以使用一种类似于Windows下的文件路径的方式，让我们可以定位到HTML或者XML结构中的具体元素。Xpath本身包含标一些准函数库，可以让我们的Xpath语法更加强大。

2、在HTML结构中，有一定的层级关系，主要的关系包括：父节点、子节点、同胞节点（兄弟节点）、先辈节点、后代节点。

一般的，像类似于这种结构，称之为一个节点。如上图，根据层次关系，我们可以知道节点是

的父节点，相应的，

节点是节点的子节点。同胞节点又叫兄弟节点，一般的处于同级层次的节点叫同胞节点，如上图中的

节点和第一个

节点、177~181行的

标签都是属于同胞节点。先辈节点又叫祖先节点，一般的，一个节点的上层以上的节点均称为先辈节点，所以父节点也是属于先辈节点的一种。基于此，我们又可以称节点是
的先辈节点。相对应的，一个节点的下层以下的节点均称为后代节点，所以子节点也是属于后代节点的一种。基于此，我们又可以称
节点是节点的后代节点。
3、理解这些节点之间的关系之后，可以方便我们更好的理解Xpath语法，下表是部分常用的Xpath语法。

• 表达式
• 详解
• //@class
• 选取所有名为class的属性
  
• /article
• 选取根元素article
  
• //div
• 选取所有div子元素
  
• article
• 选取所有article元素的所有子节点
  
• article/a
• 选取所有属于article的子元素的a元素
  
• article//div
• 选取所有属于article元素的后代的div元素
  这里特别强调“/”和“//”的区别，“/”一般代表的某个元素的子节点，而不是全部的后代节点；而“//”一般代表的某个元素的后代节点，范围比“/”代表的要更加广泛一些。@符号后边时常跟着class，代表选取名为class属性的节点，比较常见。
  4、下面针对具体的网页源码，让大家了解一下网页结构。
  

如上图中的红色框框中，class为属性，而等于号后边的“grid-5”即为属性值，有的时候节点内不只是一个属性，如上图中的196行中，就有两个属性。
5、为了更加方便的定位到div或者其他节点下的标签，我们需要继续进一步的进行定位锁定，下表是部分常用的Xpath语法。

• 表达式
• 详解
• //div[@lang]
• 选取所有拥有lang属性的div元素
  
• //div[@lang='eng']
• 选取所有拥有lang属性为eng的div元素
  
• /article/div[1]
• 选取属于article子元素的第一个div元素
  
• /article/div[last()]
• 选取属于article子元素的最后一个div元素
  
• /div/*
• 选取属于div元素的所有子节点
  
• 选取所有元素
  
• //div/a | //div/p
• 选取所有div元素的a和p元素
  掌握了Xpath语法知识之后，我们就可以通过Xpath语法来进行编写Xpath表达式，以提取网页上的目标数据。
  

千里之行，始于足下。如果想学好Xpath，更是需要勤加使用。