使用 JSDOM 抓取网页时 NodeList 长度为 0 的问题及解决方案

问题分析

当使用 JSDOM 和 Axios 抓取网页时，你可能会遇到以下情况：

1. 通过 querySelector 成功获取到
   元素。
2. ulist.childElementCount 返回 1，表示
   元素下只有一个子元素。
3. 使用 querySelectorAll('li') 查询
4. 元素时，返回的 NodeList 长度为 0。

这种现象表明，目标网站可能存在一些特殊的机制，导致 JSDOM 在首次请求时无法获取到完整的 DOM 结构。可能的原因包括：

• 服务器端动态渲染： 网站可能使用 JavaScript 在客户端动态生成
• 元素，而 JSDOM 在首次请求时可能无法执行这些 JavaScript 代码。
• Cookies 或缓存依赖： 网站可能依赖于 cookies 或缓存来确定是否返回完整的 HTML 内容。首次请求时，由于缺少 cookies 或缓存，服务器可能只返回部分 HTML。
• 反爬虫机制： 网站可能存在一些简单的反爬虫机制，例如根据 User-Agent 判断请求是否来自爬虫，并返回不同的内容。

解决方案：使用 Puppeteer

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来控制 Chrome 或 Chromium。与 JSDOM 不同，Puppeteer 可以执行 JavaScript 代码，并模拟用户的完整浏览行为，包括处理 cookies、缓存和执行 JavaScript 渲染。

以下是使用 Puppeteer 解决该问题的示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true }); // 启动无头浏览器
  const page = await browser.newPage(); // 创建新的页面

  // 访问首页，解决可能的缓存或 Cookie 问题
  await page.goto('http://example.com'); 

  // 访问目标页面
  await page.goto('https://example.com/targetpage');

  // 等待 #download-options li 元素加载完成，确保页面渲染完成
  await page.waitForSelector('#download-options li');

  // 获取 ul 元素
  const ul = await page.$("#download-options ul");

  // 获取所有的 li 元素
  const lis = await ul.$$("li");

  // 循环遍历 li 元素，获取 href 属性值
  for await (const li of lis) {
    const a = await li.$('a');
    const hrefValue = await a.evaluate((el) => el.getAttribute('href'));
    console.log(hrefValue);
  }

  // 关闭浏览器
  await browser.close();
})();

代码解释：

1. puppeteer.launch({ headless: true }): 启动一个无头浏览器，headless: true 表示在后台运行，不显示浏览器界面。
2. page.goto('http://example.com'): 首先访问网站的首页。这步很重要，因为有些网站的行为会依赖于是否已经访问过首页，例如设置 cookies 或者初始化某些状态。
3. page.goto('https://example.com/targetpage'): 访问目标页面。
4. page.waitForSelector('#download-options li'): 等待 #download-options li 元素加载完成。这可以确保页面上的 JavaScript 代码已经执行完毕，并且
5. 元素已经渲染到 DOM 中。
6. page.$("#download-options ul"): 使用 CSS 选择器获取
   元素。
7. ul.$$("li"): 在
   元素下使用 CSS 选择器获取所有的
   • 元素。 $$ 相当于 querySelectorAll。
   • a.evaluate((el) => el.getAttribute('href')): 使用 evaluate 方法在浏览器环境中执行 JavaScript 代码，获取 元素的 href 属性值。

注意事项：

• 确保已安装 Puppeteer： npm install puppeteer
• headless: true 可以在后台运行浏览器，如果需要查看浏览器界面，可以将其设置为 false。
• page.waitForSelector 用于等待元素加载完成，可以根据实际情况调整选择器和等待时间。
• Puppeteer 消耗资源较多，建议在使用完毕后关闭浏览器。

总结

当使用 JSDOM 无法正确抓取网页内容时，可以考虑使用 Puppeteer。Puppeteer 可以模拟用户的完整浏览行为，执行 JavaScript 代码，并处理 cookies 和缓存，从而解决 JSDOM 无法获取完整 DOM 结构的问题。通过访问首页并等待元素加载完成，可以确保 Puppeteer 能够正确抓取到目标元素。