在使用 JSDOM 和 Axios 进行网页抓取时，有时会遇到使用 querySelectorAll 查询
元素时返回的 NodeList 长度为 0 的问题，即使页面上明明存在这些元素。这通常是由于目标网站的特殊机制，例如首次请求时服务器不返回完整的内容，或者依赖于 %ignore_a_1%s 或缓存等。本教程将深入探讨这个问题，并提供一种使用 Puppeteer 解决该问题的方案，确保能够正确抓取到目标元素。
问题分析
当使用 JSDOM 和 Axios 抓取网页时，你可能会遇到以下情况：
通过 querySelector 成功获取到 元素。ulist.childElementCount 返回 1，表示 元素下只有一个子元素。使用 querySelectorAll(‘li’) 查询 元素时，返回的 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();})();
代码解释：
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 代码已经执行完毕，并且 元素已经渲染到 DOM 中。page.$(“#download-options ul”): 使用 CSS 选择器获取 元素。ul.$$(“li”): 在 元素下使用 CSS 选择器获取所有的 元素。 $$ 相当于 querySelectorAll。a.evaluate((el) => el.getAttribute(‘href’)): 使用 evaluate 方法在浏览器环境中执行 JavaScript 代码，获取 元素的 href 属性值。
注意事项：
确保已安装 Puppeteer： npm install puppeteerheadless: true 可以在后台运行浏览器，如果需要查看浏览器界面，可以将其设置为 false。page.waitForSelector 用于等待元素加载完成，可以根据实际情况调整选择器和等待时间。Puppeteer 消耗资源较多，建议在使用完毕后关闭浏览器。
总结
当使用 JSDOM 无法正确抓取网页内容时，可以考虑使用 Puppeteer。Puppeteer 可以模拟用户的完整浏览行为，执行 JavaScript 代码，并处理 cookies 和缓存，从而解决 JSDOM 无法获取完整 DOM 结构的问题。通过访问首页并等待元素加载完成，可以确保 Puppeteer 能够正确抓取到目标元素。
以上就是使用 JSDOM 抓取网页时 NodeList 长度为 0 的问题及解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595563.html
微信扫一扫 
支付宝扫一扫 
