Skip to main content

选择元素

¥Selecting Elements

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

¥Cheerio allows users to select elements from an HTML document using CSS selectors. This allows you to select elements based on criteria such as their tag name, class name, and attribute values. This guide provides an overview of how to use CSS selectors to retrieve elements.

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

¥To select elements with Cheerio, you first need to import the library and load a document. For example:

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 中的 $ 函数类似，允许你根据元素的标签名称、类名称和属性值来选择元素。

¥Once you have loaded the document, you can use the $ function to select elements. The $ function works just like the $ function in jQuery, and allows you to select elements based on their tag name, class name, and attribute values.

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

¥Here are some examples of how to use the $ function to select elements:

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

    ¥To select all the <p> elements in the document:

const $p = $('p');
提示

Cheerio 中的约定是在变量名称前添加 $ 前缀，以指示它包含 Cheerio 对象。这不是必需的，但这是一个值得遵循的好习惯。

¥The convention in Cheerio is to prefix the variable name with a $ to indicate that it contains a Cheerio object. This is not required, but it is a good practice to follow.

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

    ¥To select elements with a specific class name:

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

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

    ¥To select elements with a specific attribute value:

const $selected = $('[data-selected=true]');
XML 命名空间

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

¥You can select with XML Namespaces but due to the CSS specification, the colon (:) needs to be escaped for the selector to be valid.

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

  • 可以组合选择器来选择匹配多个条件的元素。例如，要选择具有 selected 类的所有 <p> 元素：

    ¥Selectors can be combined to select elements that match multiple criteria. For example, to select all <p> elements with the class selected:

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

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

    ¥Further, you can use spaces ( ) to select elements that are descendants of other elements. For example, to select all <p> elements that are descendants of <div> elements:

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

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

    ¥You can also use the > character to select elements that are direct descendants of other elements. For example, to select all <p> elements that are direct descendants of <div> elements:

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

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

¥Please have a look at the documentation of Cheerio's underlying CSS selector library, css-select, for a list of all supported selectors. For example, to select <p> elements containing the word "hello":

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

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

¥Cheerio also supports several jQuery-specific extensions that allow you to select elements based on their position in the document. For example, to select the first <p> element in the document:

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

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

¥Have a look at cheerio-select, the library that implements these extensions, to see what is available.

有关更多信息，请参阅 选择元素 和 MDN 上的 jQuery 指南。

¥For further information, please also have a look at jQuery's guide on selecting elements, as well as MDN.

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

¥Finally, to add custom CSS pseudo-classes, have a look at the Extending Cheerio guide.