在使用 JSDOM 和 Axios 进行网页抓取时，有时会遇到使用 querySelectorAll 查询 元素时返回的 NodeList 长度为 0 的问题，即使页面上明明存在这些元素。这通常是由于目标网站的特殊机制，例如首次请求时服务器不返回完整的内容，或者依赖于
cookie
s 或缓存等。本教程将深入探讨这个问题，并提供一种使用 Puppeteer 解决该问题的方案，确保能够正确抓取到目标元素。
问题分析
当使用 JSDOM 和 Axios 抓取网页时，你可能会遇到以下情况：
通过 querySelector 成功获取到
- 元素。
ulist.childElementCount 返回 1，表示
- 元素时，返回的 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 渲染。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
以下是使用 Puppeteer 解决该问题的示例代码：
代码解释： 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 代码已经执行完毕，并且
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(); })(); - 元素已经渲染到 DOM 中。
page.$("#download-options ul")
: 使用 CSS 选择器获取
- 元素。
ul.$$("li")
: 在
- 元素。 $$ 相当于 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 能够正确抓取到目标元素。
- 元素下使用 CSS 选择器获取所有的
- 元素下只有一个子元素。
使用 querySelectorAll('li') 查询