在使用 JSDOM 和 Axios 进行网页抓取时，有时会遇到使用 querySelectorAll 查询 <li> 元素时返回的 NodeList 长度为 0 的问题，即使页面上明明存在这些元素。这通常是由于目标网站的特殊机制，例如首次请求时服务器不返回完整的内容，或者依赖于 cookies 或缓存等。本教程将深入探讨这个问题，并提供一种使用 Puppeteer 解决该问题的方案，确保能够正确抓取到目标元素。
问题分析
当使用 JSDOM 和 Axios 抓取网页时，你可能会遇到以下情况：
- 通过 querySelector 成功获取到 <ul> 元素。
- ulist.childElementCount 返回 1，表示 <ul> 元素下只有一个子元素。
- 使用 querySelectorAll('li') 查询 <li> 元素时，返回的 NodeList 长度为 0。
这种现象表明，目标网站可能存在一些特殊的机制，导致 JSDOM 在首次请求时无法获取到完整的 DOM 结构。可能的原因包括：
- 服务器端动态渲染： 网站可能使用 JavaScript 在客户端动态生成 <li> 元素，而 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();
})();代码解释：
- puppeteer.launch({ headless: true }): 启动一个无头浏览器，headless: true 表示在后台运行，不显示浏览器界面。
- page.goto('http://example.com'): 首先访问网站的首页。这步很重要，因为有些网站的行为会依赖于是否已经访问过首页，例如设置 cookies 或者初始化某些状态。
- page.goto('https://example.com/targetpage'): 访问目标页面。
- page.waitForSelector('#download-options li'): 等待 #download-options li 元素加载完成。这可以确保页面上的 JavaScript 代码已经执行完毕，并且 <li> 元素已经渲染到 DOM 中。
- page.$("#download-options ul"): 使用 CSS 选择器获取 <ul> 元素。
- ul.$$("li"): 在 <ul> 元素下使用 CSS 选择器获取所有的 <li> 元素。 $$ 相当于 querySelectorAll。
- a.evaluate((el) => el.getAttribute('href')): 使用 evaluate 方法在浏览器环境中执行 JavaScript 代码，获取 <a> 元素的 href 属性值。
注意事项：
- 确保已安装 Puppeteer： npm install puppeteer
- headless: true 可以在后台运行浏览器，如果需要查看浏览器界面，可以将其设置为 false。
- page.waitForSelector 用于等待元素加载完成，可以根据实际情况调整选择器和等待时间。
- Puppeteer 消耗资源较多，建议在使用完毕后关闭浏览器。
总结
当使用 JSDOM 无法正确抓取网页内容时，可以考虑使用 Puppeteer。Puppeteer 可以模拟用户的完整浏览行为，执行 JavaScript 代码，并处理 cookies 和缓存，从而解决 JSDOM 无法获取完整 DOM 结构的问题。通过访问首页并等待元素加载完成，可以确保 Puppeteer 能够正确抓取到目标元素。
