jQuery/cheerio 选择器、上下文和根 - 有什么区别？

Question

我是 Javascript 的新手，想使用 Cheerio 库来做一些网页抓取。在图书馆介绍中看到了这段文字。我不确定选择器、上下文和根之间有什么区别。

从文档中摘录：

Cheerio 的选择器实现与 jQuery 几乎相同，因此 API 非常相似。

$( 选择器, [上下文], [根] )

选择器在上下文范围内搜索，在根范围内搜索。选择器和上下文可以是字符串表达式、DOM 元素、DOM 元素数组或cheerio 对象。root 通常是 HTML 文档字符串。

这个选择器方法是遍历和操作文档的起点。与 jQuery 一样，它是在文档中选择元素的主要方法，但与 jQuery 不同的是，它构建在 CSSSelect 库之上，该库实现了大多数 Sizzle 选择器。

示例 API：

<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>

$('.apple', '#fruits').text() //=> 苹果

$('ul .pear').attr('class') //=> 梨

$('li[class=orange]').html() //=> 橙色

---

在第一个示例中，.apple 是选择器，#fruits 是上下文。那讲得通。在第二个例子中，ul 是选择器，.pear 是上下文吗？如果选择器是为了在上下文中搜索，那么鉴于 .pear 嵌套在 ul 中，这很奇怪？

Answer 1

jQuery 和 Cheerio 扩展使用了“上下文”，它确实有特殊的含义。

上下文是 jQuery 将搜索给定选择器的位置，因此在普通 JS 中，等效内容是

document.getElementById('#fruit');

其中document是上下文，#fruit是选择器。

Cheerio 中的默认上下文始终是document，除非在格式中专门给出了另一个上下文

$(selector, context)

选择器只有在是两个字符串（以逗号分隔）时才具有上下文，因此类似的内容仍将用作document上下文

$('#fruit, .apple')

它会搜索两个元素，而不是一个在另一个元素内，等等。因为它只是一个字符串，包含一个逗号，所以它不是一回事。

第一个示例是唯一具有特殊上下文的示例，另外两个示例具有document上下文，并且是常规 CSS 选择器。

$('.apple', '#fruits')

^ 这有上下文，并且与$('#fruits').find('.apple')

$('ul .pear')

^ 这没有特殊的上下文，它只是选择.pearUL 内的所有元素

$('li[class=orange]')

^ 这也没有特殊的上下文，它选择具有class完全匹配的属性的所有 LI 元素orange，即没有其他类