本文旨在解决使用 XPath 查找具有多个共享类的 HTML 元素的问题。通过分析 XPath 的局限性，以及 CSS 选择器的优势，提供了一种更有效、更可靠的解决方案，即使用 querySelectorAll 方法和 CSS 选择器来定位目标元素。
在使用 XPath 定位 HTML 元素时，特别是当元素具有多个类名时，可能会遇到一些问题。例如，以下两个 span 元素：
... ...
如果尝试使用 XPath 表达式 //span[@class='a8Pemb OFFNJ'] 来查找它们，只会返回第二个元素，因为该表达式要求 class 属性的值必须完全等于 'a8Pemb OFFNJ'。第一个元素的 class 属性包含额外的类名 Jz5Gae，因此不匹配。
XPath 的局限性
XPath 1.0 (HTMLUnit 中使用的版本) 不支持将 class 属性值拆分为单独的 token 进行比较。虽然可以使用 contains() 函数构建更复杂的 XPath 表达式来检查 class 属性是否包含所需的每个类，但这种方法通常更复杂且容易出错。
更佳的解决方案：CSS 选择器
一个更简单、更可靠的解决方案是使用 CSS 选择器和 querySelectorAll 方法。CSS 选择器允许您根据元素的类名来定位元素，而无需考虑类名的顺序或是否存在其他类名。
例如，要查找具有 a8Pemb 和 OFFNJ 类的所有 span 元素，可以使用以下 CSS 选择器：
span.a8Pemb.OFFNJ
然后，可以使用 querySelectorAll 方法在文档中查找与此选择器匹配的所有元素：
const elements = document.querySelectorAll('span.a8Pemb.OFFNJ');
// elements 是一个 NodeList，包含所有匹配的 span 元素
elements.forEach(element => {
console.log(element);
});示例代码
以下是一个完整的示例，演示如何使用 CSS 选择器和 querySelectorAll 方法来查找具有重叠类的元素：
查找具有重叠类的元素 第一个元素 第二个元素 第三个元素
此代码将输出包含前两个 span 元素的 NodeList，因为它们都具有 a8Pemb 和 OFFNJ 类。
注意事项
- querySelectorAll 方法返回一个 NodeList，它不是一个数组。可以使用 Array.from(elements) 将其转换为数组。
- CSS 选择器区分大小写。
- 确保选择器中的类名拼写正确。
总结
当需要查找具有多个共享类的 HTML 元素时，使用 CSS 选择器和 querySelectorAll 方法比使用 XPath 更简单、更可靠。这种方法可以避免 XPath 的局限性，并提供更清晰、更易于维护的代码。
