如何使用CheerIO获取第1-5个元素标签数据及所有img的src属性

1. 第一份代码返回undefined是选择器拼写错误导致：你写的div.olw-stage类名拼写错误，正确类名是owl-stage，字母顺序写错了，匹配不到对应元素自然返回空。
2. 第二份代码只能拿到第一个src是因为Cheerio的attr()方法默认只返回匹配到的第一个元素的属性值，不会自动遍历所有匹配元素。

你可以直接遍历所有匹配到的img元素，统一提取src属性存入数组即可：

await got(`${URL}`, {
    timeout: {
      request: 30000
    }
  }).then((response) => {
    const $ = cheerio.load(response.body);
    const imgSrcList = [];
    // 选择所有.tb-thumb-item下的img元素遍历
    $('.tb-thumb-item a img').each((i, el) => {
      const src = $(el).attr('src');
      // 过滤空值避免无效数据
      if (src) imgSrcList.push(src);
    });
    // 打印所有提取到的图片地址
    console.log(imgSrcList);
});

如果需要严格匹配DOM层级，把选择器替换为修正拼写后的全路径即可：
$('#thumblist > div.owl-stage-outer > div.owl-stage > div.owl-item > div.tb-thumb-item > a > img')

• 如果提取到的src是相对路径，自行拼接站点的协议+域名即可得到完整可访问的图片地址
• 如果你测试时已经确认可以拿到第一个img的src，说明对应DOM存在于静态HTML中，不需要换用无头浏览器工具抓取动态内容

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