如何使用cheerio.js遍历节点？已通过snekfetch获取目标HTML内容

嘿，我来帮你梳理下怎么用 Cheerio.js 遍历你通过 snekfetch 获取到的这段 HTML 节点～ 先从基础准备开始，再针对你的 HTML 结构给出几种常用的遍历方式：

第一步：准备工作 #

首先确保你已经安装了 Cheerio：

npm install cheerio

然后把 snekfetch 获取到的 HTML 加载到 Cheerio 中：

const cheerio = require('cheerio');
// 假设你用 snekfetch 获取到的 HTML 存放在 html 变量里
const $ = cheerio.load(html);

常用遍历场景 #

1. 遍历 .entry-content 下的所有直接子节点 #

如果你想逐个处理容器里的每一个子元素（比如 h4、h3、p 这些），可以用 .children() 配合 .each() 来遍历：

$('.entry-content').children().each((index, element) => {
  // 获取当前节点的标签名（转成小写方便判断）
  const tagName = $(element).prop('tagName').toLowerCase();
  console.log(`第 ${index + 1} 个节点：${tagName}`);

  // 根据标签类型做针对性处理
  if (tagName === 'h3') {
    console.log('分类名称：', $(element).text().trim());
  } else if (tagName === 'img') {
    console.log('图片地址：', $(element).attr('src'));
  }
});

2. 按分类分组遍历（匹配 h3 与对应图片） #

你的 HTML 结构里 h3 是分类标题，后面跟着对应图片，这种情况可以先定位所有 h3，再遍历每个分类下的图片：

$('.entry-content h3').each((index, h3Element) => {
  const categoryName = $(h3Element).text().trim();
  console.log(`=== 分类：${categoryName} ===`);

  // 找到当前 h3 后面的所有图片，直到遇到下一个 h3 为止
  $(h3Element).nextUntil('h3', 'img').each((imgIndex, imgElement) => {
    console.log(`图片 ${imgIndex + 1}：`, $(imgElement).attr('src'));
  });
});

3. 直接提取所有目标元素（比如所有图片） #

如果只需要获取所有图片的地址，直接用选择器配合 .each() 即可：

$('.entry-content img.aligncenter').each((index, element) => {
  console.log(`图片 ${index + 1} 地址：`, $(element).attr('src'));
});

4. 递归遍历所有层级的节点 #

如果需要深入到每个子节点层级做处理，可以写个递归函数来遍历：

function traverseNodes(element) {
  const $el = $(element);
  const tagName = $el.prop('tagName').toLowerCase();
  console.log(`节点：${tagName}，内容：${$el.text().trim()}`);

  // 递归遍历当前节点的所有子节点
  $el.children().each((_, childElement) => {
    traverseNodes(childElement);
  });
}

// 从 .entry-content 容器开始遍历整个节点树
traverseNodes($('.entry-content')[0]);

内容的提问来源于stack exchange，提问作者user1897151