Skip to main content

遍历 DOM

¥Traversing the DOM

使用 Cheerio 遍历文档允许你选择和操作文档中的特定元素。无论你是想在 DOM 树中上下移动、在树中横向移动，还是根据特定条件过滤元素，Cheerio 都提供了一系列方法来帮助你实现这些目的。

¥Traversing a document with Cheerio allows you to select and manipulate specific elements within the document. Whether you want to move up and down the DOM tree, move sideways within the tree, or filter elements based on certain criteria, Cheerio provides a range of methods to help you do so.

在本指南中，我们将介绍 Cheerio 中用于遍历和过滤元素的各种方法。我们将介绍在 DOM 树中向下移动、在 DOM 树中向上移动、在树内横向移动以及过滤元素的方法。读完本指南后，你将很好地了解如何使用这些方法通过 Cheerio 选择和操作文档中的元素。

¥In this guide, we will go through the various methods available in Cheerio for traversing and filtering elements. We will cover methods for moving down the DOM tree, moving up the DOM tree, moving sideways within the tree, and filtering elements. By the end of this guide, you will have a good understanding of how to use these methods to select and manipulate elements within a document using Cheerio.

提示

本指南旨在向你概述 Cheerio 中用于遍历和过滤元素的各种方法。有关这些方法的更详细参考，请参阅 API 文档。

¥This guide is intended to give you an overview of the various methods available in Cheerio for traversing and filtering elements. For a more detailed reference of these methods, see the API documentation.

沿着 DOM 树向下移动​

¥Moving Down the DOM Tree

Cheerio 提供了多种方法来向下移动 DOM 树并选择当前选择的子元素或后代元素。

¥Cheerio provides several methods for moving down the DOM tree and selecting elements that are children or descendants of the current selection.

find​

find 方法 允许你在选择中定位特定元素。它采用 CSS 选择器作为参数，并返回一个新选择，其中包含当前选择中与选择器匹配的所有元素。

¥The find method allows you to locate specific elements within a selection. It takes a CSS selector as an argument and returns a new selection containing all elements that match the selector within the current selection.

以下是使用 find 选择 <ul> 元素中的所有 <li> 元素的示例：

¥Here's an example of using find to select all <li> elements within a <ul> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const listItems = $('ul').find('li');
render(<>List item count: {listItems.length}</>);
Result
Loading...

children​

children 方法 允许你选择元素的直接子元素。它返回一个新选择，其中包含当前选择的所有直接子代。

¥The children method allows you to select the direct children of an element. It returns a new selection containing all direct children of the current selection.

以下是使用 children 选择 <ul> 元素中的所有 <li> 元素的示例：

¥Here's an example of using children to select all <li> elements within a <ul> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const listItems = $('ul').children('li');
render(<>List item count: {listItems.length}</>);
Result
Loading...

contents​

contents 方法 允许你选择元素的所有子元素，包括文本和注释节点。它返回一个包含当前选择的所有子项的新选择。

¥The contents method allows you to select all children of an element, including text and comment nodes. It returns a new selection containing all children of the current selection.

下面是使用 contents 选择 <div> 元素的所有子元素的示例：

¥Here's an example of using contents to select all children of a <div> element:

Live Editor
const $ = cheerio.load(
  `<div>
    Text <p>Paragraph</p>
  </div>`,
);

const contents = $('div').contents();
render(<>Contents count: {contents.length}</>);
Result
Loading...

向上移动 DOM 树​

¥Moving Up the DOM Tree

Cheerio 提供了多种方法来向上移动 DOM 树并选择当前选择的祖级元素。

¥Cheerio provides several methods for moving up the DOM tree and selecting elements that are ancestors of the current selection.

parent​

parent 方法 允许你选择选择的父元素。它返回一个新选择，其中包含当前选择中每个元素的父元素。

¥The parent method allows you to select the parent element of a selection. It returns a new selection containing the parent element of each element in the current selection.

下面是使用 parent 选择 <li> 元素的父 <ul> 元素的示例：

¥Here's an example of using parent to select the parent <ul> element of a <li> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
  </ul>`,
);

const list = $('li').parent();
render(<>{list.prop('tagName')}</>);
Result
Loading...

parents 和 parentsUntil​

¥parents and parentsUntil

parents 方法 允许你选择选择的所有祖级元素，直到根元素。它返回一个新选择，其中包含当前选择的所有祖级元素。

¥The parents method allows you to select all ancestor elements of a selection, up to the root element. It returns a new selection containing all ancestor elements of the current selection.

parentsUntil 方法 与 parents 类似，但允许你指定祖级元素作为停止点。它返回一个新选择，其中包含当前选择的所有祖级元素，直到（但不包括）指定的祖级。

¥The parentsUntil method is similar to parents, but allows you to specify an ancestor element as a stop point. It returns a new selection containing all ancestor elements of the current selection up to (but not including) the specified ancestor.

下面是使用 parents 和 parentsUntil 选择 <li> 元素的祖级元素的示例：

¥Here's an example of using parents and parentsUntil to select ancestor elements of a <li> element:

Live Editor
const $ = cheerio.load(
  `<div>
    <ul>
      <li>Item 1</li>
    </ul>
  </div>`,
);

const ancestors = $('li').parents();
const ancestorsUntil = $('li').parentsUntil('div');

render(
  <>
    <p>
      Ancestor count (also includes "body" and "html" tags): {ancestors.length}
    </p>
    <p>Ancestor count (until "div"): {ancestorsUntil.length}</p>
  </>,
);
Result
Loading...

closest​

closest 方法 允许你选择与给定选择器匹配的最接近的祖级。它返回一个新选择，其中包含与选择器匹配的最接近的祖级元素。如果未找到匹配的祖级，该方法将返回空选择。

¥The closest method allows you to select the closest ancestor matching a given selector. It returns a new selection containing the closest ancestor element that matches the selector. If no matching ancestor is found, the method returns an empty selection.

下面是使用 closest 选择 <li> 元素的最近祖级 <ul> 元素的示例：

¥Here's an example of using closest to select the closest ancestor <ul> element of a <li> element:

Live Editor
const $ = cheerio.load(
  `<div>
    <ul>
      <li>Item 1</li>
    </ul>
  </div>`,
);

const list = $('li').closest('ul');
render(<>{list.prop('tagName')}</>);
Result
Loading...

在 DOM 树中横向移动​

¥Moving Sideways Within the DOM Tree

Cheerio 提供了几种在 DOM 树中横向移动并选择当前选择的同级元素的方法。

¥Cheerio provides several methods for moving sideways within the DOM tree and selecting elements that are siblings of the current selection.

next 和 prev​

¥next and prev

next 方法 允许你选择选择的下一个同级元素。它返回一个包含下一个同级元素（如果有）的新选择。如果给定的选择包含多个元素，则 next 包含每个元素的下一个同级元素。

¥The next method allows you to select the next sibling element of a selection. It returns a new selection containing the next sibling element (if there is one). If the given selection contains multiple elements, next includes the next sibling for each one.

prev 方法 与 next 类似，但允许你选择前一个同级元素。它返回一个新选择，其中包含给定选择中每个元素的前一个同级元素。

¥The prev method is similar to next, but allows you to select the previous sibling element. It returns a new selection containing the previous sibling element for each element in the given selection.

下面是使用 next 和 prev 选择 <li> 元素的同级元素的示例：

¥Here's an example of using next and prev to select sibling elements of a <li> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const nextItem = $('li:first').next();
const prevItem = $('li:eq(1)').prev();

render(
  <>
    <p>Next: {nextItem.text()}</p>
    <p>Prev: {prevItem.text()}</p>
  </>,
);
Result
Loading...

nextAll、prevAll 和 siblings​

¥nextAll, prevAll, and siblings

nextAll 方法 允许你选择当前元素之后的所有同级元素。它返回一个新选择，其中包含当前选择中每个元素之后的所有同级元素。

¥The nextAll method allows you to select all siblings after the current element. It returns a new selection containing all sibling elements after each element in the current selection.

prevAll 方法 与 nextAll 类似，但允许你选择当前元素之前的所有同级元素。它返回一个新选择，其中包含当前选择中每个元素之前的所有同级元素。

¥The prevAll method is similar to nextAll, but allows you to select all siblings before the current element. It returns a new selection containing all sibling elements before each element in the current selection.

siblings 方法 允许你选择一个选择的所有同级。它返回一个新选择，其中包含当前选择中每个元素的所有同级元素。

¥The siblings method allows you to select all siblings of a selection. It returns a new selection containing all sibling elements of each element in the current selection.

下面是使用 nextAll、prevAll 和 siblings 选择 <li> 元素的同级元素的示例：

¥Here's an example of using nextAll, prevAll, and siblings to select sibling elements of a <li> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>[1]</li>
    <li>[2]</li>
    <li>[3]</li>
  </ul>`,
);

const nextAll = $('li:first').nextAll();
const prevAll = $('li:last').prevAll();
const siblings = $('li:eq(1)').siblings();

render(
  <>
    <p>Next All: {nextAll.text()}</p>
    <p>Prev All: {prevAll.text()}</p>
    <p>Siblings: {siblings.text()}</p>
  </>,
);
Result
Loading...

nextUntil 和 prevUntil​

¥nextUntil and prevUntil

nextUntil 方法 允许你选择当前元素之后直到指定同级元素的所有同级元素。它采用选择器或同级元素作为参数，并返回一个新选择，其中包含当前元素之后直到（但不包括）指定元素的所有同级元素。

¥The nextUntil method allows you to select all siblings after the current element up to a specified sibling. It takes a selector or a sibling element as an argument and returns a new selection containing all sibling elements after the current element up to (but not including) the specified element.

prevUntil 方法 与 nextUntil 类似，但允许你选择当前元素之前的所有同级元素，直到指定的同级元素。它采用选择器或同级元素作为参数，并返回一个新选择，其中包含当前元素之前直到（但不包括）指定元素的所有同级元素。

¥The prevUntil method is similar to nextUntil, but allows you to select all siblings before the current element up to a specified sibling. It takes a selector or a sibling element as an argument and returns a new selection containing all sibling elements before the current element up to (but not including) the specified element.

下面是使用 nextUntil 和 prevUntil 选择 <li> 元素的同级元素的示例：

¥Here's an example of using nextUntil and prevUntil to select sibling elements of a <li> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>`,
);

const nextUntil = $('li:first').nextUntil('li:last-child');
const prevUntil = $('li:last').prevUntil('li:first-child');

render(
  <>
    <p>Next: {nextUntil.text()}</p>
    <p>Prev: {prevUntil.text()}</p>
  </>,
);
Result
Loading...

过滤元素​

¥Filtering elements

Cheerio 提供了多种方法来过滤选择中的元素。

¥Cheerio provides several methods for filtering elements within a selection.

提示

大多数过滤器也作为选择器存在。例如，first 方法可用作 :first 选择器。鼓励用户尽可能使用选择器语法，因为它的性能更高。

¥Most of these filters also exist as selectors. For example, the first method is available as the :first selector. Users are encouraged to use the selector syntax when possible, as it is more performant.

eq​

eq 方法 允许你选择选择范围内指定索引处的元素。它采用索引作为参数，并返回包含指定索引处的元素的新选择。

¥The eq method allows you to select an element at a specified index within a selection. It takes an index as an argument and returns a new selection containing the element at the specified index.

以下是使用 eq 选择 <ul> 元素中的第二个 <li> 元素的示例：

¥Here's an example of using eq to select the second <li> element within a <ul> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const secondItem = $('li').eq(1);
render(<>{secondItem.text()}</>);
Result
Loading...

filter 和 not​

¥filter and not

filter 方法 允许你选择与给定选择器匹配的元素。它采用选择器作为参数，并返回一个仅包含与选择器匹配的元素的新选择。

¥The filter method allows you to select elements that match a given selector. It takes a selector as an argument and returns a new selection containing only those elements that match the selector.

not 方法 与 filter 类似，但允许你选择与给定选择器不匹配的元素。它采用选择器作为参数，并返回一个新选择，其中仅包含那些与选择器不匹配的元素。

¥The not method is similar to filter, but allows you to select elements that do not match a given selector. It takes a selector as an argument and returns a new selection containing only those elements that do not match the selector.

以下是使用 filter 和 not 在 <ul> 元素中选择 <li> 元素的示例：

¥Here's an example of using filter and not to select <li> elements within a <ul> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li class="item">Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const matchingItems = $('li').filter('.item');
const nonMatchingItems = $('li').not('.item');

render(
  <>
    <p>Matching: {matchingItems.text()}</p>
    <p>Non-matching: {nonMatchingItems.text()}</p>
  </>,
);
Result
Loading...

has​

has 方法 允许你选择包含与给定选择器匹配的元素的元素。它采用选择器作为参数，并返回一个新选择，其中仅包含那些包含与选择器匹配的元素的元素。

¥The has method allows you to select elements that contain an element matching a given selector. It takes a selector as an argument and returns a new selection containing only those elements that contain an element matching the selector.

以下是使用 has 选择包含 <strong> 元素的 <ul> 元素中的 <li> 元素的示例：

¥Here's an example of using has to select <li> elements within a <ul> element that contain a <strong> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>
      <strong>Item 2</strong>
    </li>
  </ul>`,
);

const matchingItems = $('li').has('strong');
render(<>{matchingItems.length}</>);
Result
Loading...

first 和 last​

¥first and last

first 方法 允许你选择选择中的第一个元素。它返回包含第一个元素的新选择。

¥The first method allows you to select the first element in a selection. It returns a new selection containing the first element.

last 方法 与 first 类似，但允许你选择选择中的最后一个元素。它返回包含最后一个元素的新选择。

¥The last method is similar to first, but allows you to select the last element in a selection. It returns a new selection containing the last element.

下面是使用 first 和 last 选择 <ul> 元素中的元素的示例：

¥Here's an example of using first and last to select elements within a <ul> element:

Live Editor
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const firstItem = $('li').first();
const lastItem = $('li').last();

render(
  <>
    <p>First: {firstItem.text()}</p>
    <p>Last: {lastItem.text()}</p>
  </>,
);
Result
Loading...

结论​

¥Conclusion

Cheerio 提供了一系列用于遍历和过滤文档中的元素的方法。这些方法允许你在 DOM 树中上下移动、在树中横向移动以及根据各种条件过滤元素。通过使用这些方法，你可以使用 Cheerio 轻松选择和操作文档中的元素。

¥Cheerio provides a range of methods for traversing and filtering elements within a document. These methods allow you to move up and down the DOM tree, move sideways within the tree, and filter elements based on various criteria. By using these methods, you can easily select and manipulate elements within a document using Cheerio.