跳至主要内容

遍历 DOM

使用 Cheerio 遍历文档允许您选择和操作文档中的特定元素。无论您是想在 DOM 树中向上或向下移动，在树中横向移动，还是根据某些条件过滤元素，Cheerio 都提供了多种方法来帮助您完成这些操作。

在本指南中，我们将介绍 Cheerio 中用于遍历和过滤元素的各种方法。我们将涵盖用于在 DOM 树中向下移动、向上移动、在树中横向移动以及过滤元素的方法。在本指南结束时，您将对如何使用这些方法来使用 Cheerio 在文档中选择和操作元素有一个很好的了解。

提示

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

向下遍历 DOM 树​

Cheerio 提供了几种方法用于向下遍历 DOM 树并选择当前选择的元素的子元素或后代元素。

find​

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

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

实时编辑器
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const listItems = $('ul').find('li');
render(<>List item count: {listItems.length}</>);
结果
正在加载...

children​

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

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

实时编辑器
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const listItems = $('ul').children('li');
render(<>List item count: {listItems.length}</>);
结果
正在加载...

contents​

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

以下是如何使用 contents 选择 <div> 元素的所有子元素的示例

实时编辑器
const $ = cheerio.load(
  `<div>
    Text <p>Paragraph</p>
  </div>`,
);

const contents = $('div').contents();
render(<>Contents count: {contents.length}</>);
结果
正在加载...

向上遍历 DOM 树​

Cheerio 提供了几种方法用于向上遍历 DOM 树并选择当前选择的元素的祖先元素。

parent​

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

以下是如何使用 parent 选择 <li> 元素的父 <ul> 元素的示例

实时编辑器
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
  </ul>`,
);

const list = $('li').parent();
render(<>{list.prop('tagName')}</>);
结果
正在加载...

parents 和 parentsUntil​

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

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

以下是如何使用 parents 和 parentsUntil 选择 <li> 元素的祖先元素的示例

实时编辑器
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>
  </>,
);
结果
正在加载...

closest​

closest 方法 允许您选择与给定选择器匹配的最近的祖先。它返回一个包含与选择器匹配的最近祖先元素的新选择。如果没有找到匹配的祖先，该方法将返回一个空选择。

以下是如何使用 closest 选择 <li> 元素的最近的祖先 <ul> 元素的示例

实时编辑器
const $ = cheerio.load(
  `<div>
    <ul>
      <li>Item 1</li>
    </ul>
  </div>`,
);

const list = $('li').closest('ul');
render(<>{list.prop('tagName')}</>);
结果
正在加载...

在 DOM 树中横向移动​

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

next 和 prev​

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

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

以下是如何使用 next 和 prev 选择 <li> 元素的同级元素的示例

实时编辑器
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>
  </>,
);
结果
正在加载...

nextAll、prevAll 和 siblings​

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

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

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

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

实时编辑器
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>
  </>,
);
结果
正在加载...

nextUntil 和 prevUntil​

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

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

以下是如何使用 nextUntil 和 prevUntil 选择 <li> 元素的同级元素的示例

实时编辑器
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>
  </>,
);
结果
正在加载...

过滤元素​

Cheerio 提供了几种方法用于在选择中过滤元素。

提示

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

eq​

eq 方法 允许您选择选择中指定索引处的元素。它接受索引作为参数，并返回一个包含指定索引处的元素的新选择。

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

实时编辑器
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const secondItem = $('li').eq(1);
render(<>{secondItem.text()}</>);
结果
正在加载...

filter 和 not​

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

not 方法 与 filter 类似，但允许您选择与给定选择器不匹配的元素。它接受选择器作为参数，并返回一个仅包含不匹配选择器的元素的新选择。

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

实时编辑器
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>
  </>,
);
结果
正在加载...

has​

has 方法 允许您选择包含与给定选择器匹配的元素的元素。它接受选择器作为参数，并返回一个仅包含包含与选择器匹配的元素的元素的新选择。

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

实时编辑器
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>
      <strong>Item 2</strong>
    </li>
  </ul>`,
);

const matchingItems = $('li').has('strong');
render(<>{matchingItems.length}</>);
结果
正在加载...

first 和 last​

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

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

以下是一个使用 first 和 last 在 <ul> 元素中选择元素的示例。

实时编辑器
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>
  </>,
);
结果
正在加载...

结论​

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