选择元素

Cheerio 允许用户使用 CSS 选择器从 HTML 文档中选择元素。这使您可以根据元素的标签名、类名和属性值等标准来选择元素。本指南概述了如何使用 CSS 选择器来检索元素。

要使用 Cheerio 选择元素，首先需要导入库并加载文档。例如

import * as cheerio from 'cheerio';

// Load the document using any of the methods described in the "Loading Documents" section.
const $ = cheerio.load('<html>...</html>');

加载文档后，可以使用 $ 函数来选择元素。$ 函数的工作原理与 jQuery 中的 $ 函数相同，允许您根据元素的标签名、类名和属性值来选择元素。

以下是一些使用 $ 函数选择元素的示例

要选择文档中的所有 <p> 元素

const $p = $('p');

提示

Cheerio 中的约定是在变量名前加一个 $，表示它包含一个 Cheerio 对象。这不是必须的，但这是一个良好的实践。

要选择具有特定类名的元素

const $selected = $('.selected');

要选择具有特定属性值的元素

const $selected = $('[data-selected=true]');

XML 命名空间

您可以使用 XML 命名空间进行选择，但由于 CSS 规范，冒号 (:) 需要转义才能使选择器有效。

$('[xml\\:id="main"');

选择器可以组合在一起，以选择匹配多个标准的元素。例如，要选择所有具有类 selected 的 <p> 元素

const $selected = $('p.selected');

此外，您可以使用空格 ( ) 选择作为其他元素后代的元素。例如，要选择所有作为 <div> 元素后代的 <p> 元素

const $p = $('div p');

您还可以使用 > 字符选择作为其他元素直接后代的元素。例如，要选择所有作为 <div> 元素直接后代的 <p> 元素

const $p = $('div > p');

请查看 Cheerio 底层 CSS 选择器库 css-select 的文档，了解所有支持的选择器列表。例如，要选择包含单词“hello”的 <p> 元素

const $p = $('p:contains("hello")');

Cheerio 还支持一些 jQuery 特定的扩展，允许您根据元素在文档中的位置来选择元素。例如，要选择文档中的第一个 <p> 元素

const $p = $('p:first');

请查看 cheerio-select，该库实现了这些扩展，以查看可用的内容。

有关更多信息，请查看 jQuery 关于选择元素的指南，以及 MDN。

最后，要添加自定义 CSS 伪类，请查看扩展 Cheerio 指南。