作为一名网页抓取爱好者，你可能已经接触过 XPath 和 CSS 选择器这两个术语。它们是浏览和从 HTML 或 XML 文档中提取元素的两种常见方法，但它们究竟是什么，又有哪些区别呢？在本文中，我将带你详细对比 XPath 和 CSS 选择器，探讨它们的特点和应用场景。
我们将首先简要概述 XPath 和 CSS 选择器，并通过示例展示如何利用它们在 HTML 文档中定位并提取元素。我们将深入探讨两者的语法和功能差异，了解 XPath 提供的各种内置函数，并演示如何通过 CSS 和 JavaScript 实现相同的效果。此外，我们还将分析每种方法的优缺点，以及如何为你的项目选择合适的方案。
那么，请准备好笔记本，削好铅笔，准备好深入探索 XPath 和 CSS 选择器的世界吧！
XPath（全称 XML Path Language）是一种用于遍历 XML 文档的查询语言。它于 1999 年首次推出，旨在为访问 XML 文档中的元素提供一种标准方法。该语言围绕“路径”这一概念构建，用于根据元素在文档中的位置来选择特定元素。
XPath 的一个关键特征是它使用路径表示法。这种表示法允许你根据元素在文档树中的位置来选择它们。例如，在 HTML 文档中，路径 "html/body/p" 将选择所有作为 body 元素直接子元素的 p 元素，而 body 元素本身又是 html 元素的直接子元素。
XPath 的语法非常简单：
//tagname[@attribute='value']
其中 'tagname' 代表您要查找的 HTML 元素类型（例如 div、a、p），'attribute' 是目标 HTML 元素的属性，定位器将以此进行搜索（例如 class），而 'value' 则是您希望匹配的具体值
CSS 选择器（全称层叠样式表）用于根据元素的属性（如 class、id 和属性）来选择元素。它们比 XPath 更易于阅读和理解，但在浏览文档方面的能力有限。CSS 选择器主要用于样式设置和布局，但您也可以使用它们从网页中提取信息：
<html> <body> <p class="highlight">Hello, world!</p> </body> </html>
|
若要使用 CSS 选择器选中“Hello, world!”这行文本，我们需要借助 JavaScript：
let p_tag = document.querySelector(“p.highlight”)
let p_text = p_tag.innerText另一方面，XPath 专为提供 XML 文档的查询语言而设计，并自带丰富的内置函数。这些函数可用于执行计算并从元素中提取特定信息。例如，使用 XPath 的 text() 函数，您可以直接选取元素的文本值：
<html> <body> <p>Hello, world!</p> </body> </html>
若要使用 XPath 中的 text() 函数选择文本“Hello, world!”，表达式应为：
/html/body/p/text()
如果您希望更深入地探索 XPath 和 CSS 选择器的世界，我们提供几篇相关文章供您参考。第一篇文章介绍了 XPath 选择器的基础知识，包括语法、函数以及如何遍历 DOM 树。第二篇文章则深入探讨了 CSS 选择器的基础知识，包括各种类型的选择器。
为了清晰地说明 XPath 和 CSS 选择器之间的主要区别，让我们分析一个模拟的 HTML 结构：
<!doctype html>
<html>
<head>
<title>Top News</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Top News Stories</h1>
<div class="container">
<div class="news-story">
<h2> <a href="https://edition.cnn.com/2022/12/28/weather/buffalo-winter-storm-new-york-blizzard-wednesday/index.html">Winter Storm</a> </h2>
<p>Winter storm death toll rises to 37 in Buffalo as criticism arises over handling of storm and cleanup</p>
</div>
<div class="news-story">
<h2> <a href="https://www.nbcnews.com/politics/politics-news/spacex-leader-reassured-nasa-chief-elson-musk-rcna61189">SpaceX</a> </h2>
<p>NASA chief: SpaceX leader says Elon Musk’s Twitter drama is ‘nothing to worry about’.</p>
</div>
</div>
</body>
</html>在开发者工具中测试 XPath 和 CSS 选择器，是验证选择器是否正常工作的快速简便方法。大多数现代浏览器的操作流程相似，但为了便于本示例演示，我们将使用 Google Chrome。
首先，在 Google Chrome 中打开您想要测试选择器的网页。接下来，右键单击您想要选择的元素，并从上下文菜单中选择“检查”。这将打开开发者工具窗口：
在开发者工具窗口中，左侧显示网页的 HTML 源代码，右侧则显示对应的渲染页面。
要查找某个元素的完整 XPath 和 CSS 选择器，请在 HTML 中右键单击该元素，然后选择“复制 > 复制完整 XPath”或“复制 > 复制选择器”。这将把包含所有父元素的完整路径复制到剪贴板中。随后，您可以将此路径粘贴到代码中，或粘贴到开发者工具的搜索栏（Ctrl+F）中以定位该元素。
例如，若要选取上文示例 HTML 中的所有 h2 标签，只需在搜索栏中输入“//h2”并按回车键。
XPath 与 CSS 之间的主要区别之一在于，XPath 可以根据元素在文档中的位置进行选择，而 CSS 选择器仅限于根据元素的属性进行选择。
例如，在 XPath 中，我们可以使用表达式 //div[@class='news-story'][2] 选中具有 class 为 news-story 的第二个 div 元素。而使用 CSS 选择器时，只能通过 div.news-story:nth-child(2) 来选中它。
div.news-story:nth-child(2) 将从所有具有“news-story”类且属于同一容器元素子节点的 div 元素中，选取第二个 div 元素。
//div[@class='news-story'][2] 允许您根据元素在整个文档中的位置进行选择。该元素不必是特定容器元素的子元素：
<html>
<body>
<div class="container">
<div class="news-story">
<h2>News Story 1</h2>
</div>
</div>
<div class="container">
<div class="news-story">
<h2>News Story 2</h2>
</div>
</div>
</body>
</html>在此示例中，div[@class='news-story'][2] 选中了第二篇新闻。
div.news-story:nth-child(2) 不会选中任何元素，因为每个容器元素只有一个直接子元素。
XPath 在导航 DOM 树时具有更大的灵活性。它支持在树中向上和向下移动。而 CSS 选择器仅允许向下导航。这使得 XPath 更强大、更通用，但也更为复杂。
使用 XPath，您可以利用父元素轴和祖先轴等轴来访问元素的父元素或祖先，而 CSS 选择器无法做到这一点。
例如，XPath 表达式 //div[@class='news-story'][1]/parent::*//h2 会选择第一个 class 为 "news-story" 的 div 元素。随后，它使用 parent::* 运算符导航至该元素的父元素，并选择该父元素内的 h2 元素。
或者，您可以使用方括号来选择第一个 class 为 "news-story" 的 div 元素的父元素，然后使用 //div[@class='news-story'][1]/..//h2 选择该父元素内的 h2 元素。
XPath 与 CSS 选择器之间的另一个重要区别在于，XPath 拥有丰富的内置函数，例如 count()、sum()、string()、substring() 和 contains()。这些函数可用于操作元素并提取数据。
count() 用于统计符合特定条件的元素数量。例如，要统计具有 class="news-story" 的 div 元素数量，我们可以使用 XPath 表达式 count(//div[@class='news-story'])。
相应的 CSS 和 JavaScript 实现方式如下：
document.querySelectorAll('div.news-story').length
sum() 用于计算符合特定条件的元素集合中某个值的总和。例如，要计算所有 p 元素文本内容中的总字符数，我们可以使用 XPath 表达式 sum(//p/text()/string-length())。
相应的 CSS 和 JavaScript 实现如下：
var sum = 0;
var elements = document.querySelectorAll('p');
elements.forEach(function(element) {
sum += element.innerText.length;
});
console.log(sum);substring() 用于从字符串中提取子字符串。例如，要提取某个元素文本内容中的第 2 至第 5 个字符，可以使用 XPath 表达式 substring(//p/text(), 2, 5)。
相应的 CSS 和 JavaScript 实现：
document.querySelector('p').innerText.substring(2, 5)
contains() 用于检查字符串是否包含某个子字符串。例如，要检查某个 p 元素的文本内容是否包含单词“Winter”，可以使用 XPath 表达式 //p[contains(text(),"Winter")]
与 XPath 相比，CSS 选择器具有多项优势，使其成为某些项目的理想选择。CSS 选择器的主要优势之一在于其简单易懂。与可能复杂且难以阅读的 XPath 不同，CSS 选择器易于理解和使用。
CSS 选择器的另一项优势在于其性能。由于 CSS 选择器仅沿 DOM 树向下遍历，因此通常比既可向上也可向下遍历树的 XPath 更快。
最后，CSS 选择器在 Web 开发中应用更为广泛。这意味着 Web 开发人员更可能熟悉它们，也更愿意协助您完成项目。
总而言之，XPath 和 CSS 选择器都是强大的工具，可让您在 HTML 文档中导航并提取元素。XPath 功能强大且灵活，但可能难以阅读；而 CSS 选择器更易于阅读，但在文档导航能力上有所局限。
在选择 XPath 或 CSS 选择器时，请考虑文档的结构以及您想要提取的信息。如果您希望根据元素的位置提取数据，XPath 是更好的选择。然而，如果您希望根据类名或 ID 等属性提取数据，CSS 选择器则是更佳的选择。
如果您想进一步了解网络爬虫如何助力您的业务，欢迎联系 WebScrapingAPI。我们非常乐意为您解答所有疑问！
