XPath 与 CSS
作为一名网页抓取爱好者，你可能已经接触过“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 选择器（全称 Cascading Style Sheets）用于根据元素的属性（如类名、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 选择器之间的主要区别，让我们来分析一个示例 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会选择第一个类名为“news-story”的 div 元素。随后，它使用 parent::* 运算符导航至该元素的父元素，并选择该父元素内的 h2 元素。
或者，您可以使用方括号来选择第一个类名为“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').lengthsum()用于计算满足特定条件的元素集合中某个值的总和。例如，要计算所有 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")]
CSS 选择器的优势
与XPath相比，CSS选择器具有多项优势，这使得它们成为某些项目的理想选择。CSS选择器的主要优势之一在于其简单易懂且易于阅读。与可能复杂且难以理解的XPath不同，CSS选择器易于理解和使用。
CSS 选择器的另一个优势在于其性能。由于 CSS 选择器仅沿 DOM 树向下遍历，因此通常比 XPath 更快，后者可以沿树向上和向下遍历。
最后，CSS 选择器在网页开发中也更为广泛地使用。这意味着网页开发者更可能熟悉它们，也更愿意在你的项目中提供帮助。
总结
总而言之，XPath 和 CSS 选择器都是功能强大的工具，可用于在 HTML 文档中定位和提取元素。XPath 功能强大且灵活，但可读性较差；而 CSS 选择器虽然更易于阅读，但在定位文档元素方面的能力却较为有限。
在选择 XPath 和 CSS 选择器时，请考虑文档的结构以及您想要提取的信息。如果您希望根据元素的位置来提取数据，XPath 是更好的选择。但是，如果您希望根据类名或 ID 等属性来提取数据，CSS 选择器则是更合适的选择。
如果您想进一步了解网络爬虫如何助力您的业务，欢迎联系我们WebScrapingAPI。我们非常乐意为您解答所有疑问！
