在使用JSDOM和Axios进行网页抓取时，有时会遇到`querySelectorAll`返回空`NodeList`的问题，尤其当目标元素（如`
`）是网站动态加载时。这通常是因为JSDOM仅处理静态HTML，无法模拟浏览器执行JavaScript。本文将深入探讨此问题的原因，并提供使用Puppeteer这一无头浏览器工具的解决方案，以有效抓取动态渲染的网页内容，确保获取预期的DOM元素。
网页抓取中NodeList为空的常见问题
在使用axios获取网页HTML内容，并结合JSDOM解析DOM时，开发者可能会遇到一个令人困惑的现象：通过querySelector或querySelectorAll查询某个元素（例如ul下的li元素），尽管在浏览器开发者工具中这些元素清晰可见，但在代码中返回的NodeList却是空的，或者其length属性为0。
例如，针对以下HTML结构：
尝试使用以下JSDOM代码抓取li元素：
// 假设 res.data 包含了上述HTMLconst dom = new JSDOM(res.data);const ulist = dom.window.document.querySelector('#download-options > .panel-body > ul');// ulist 可能会正确返回 HTMLUListElement {}// ulist.childElementCount 可能会返回 1 (表示有一个子元素，即文本节点或注释)const lists = ulist.querySelectorAll('li');// 此时 lists.length 却返回 0，而非预期的 3
这种情况下，ulist本身可能被正确选中，但其内部的li元素却无法通过querySelectorAll获取。
问题根源：静态抓取与动态渲染
这个问题的核心在于网页内容的加载方式。axios作为一个HTTP客户端，它只能获取服务器首次响应的原始HTML字符串。JSDOM则是一个纯JavaScript的DOM实现，它根据这个原始HTML字符串构建DOM树，但它不具备浏览器环境，无法执行页面中的JavaScript代码。
许多现代网站会利用JavaScript在页面加载完成后动态地生成、修改或插入DOM元素。这些动态内容可能包括：
通过AJAX请求获取数据后渲染列表项。基于用户行为或设备状态调整页面布局。通过前端框架（如React, Vue, Angular）进行客户端渲染。网站可能出于反爬虫目的，延迟加载关键内容，或依赖于特定的Cookie、Session或用户代理来显示完整内容。
当axios获取到的是一个“骨架屏”HTML，而li元素是由后续JavaScript代码动态填充时，JSDOM处理的DOM树自然就不会包含这些动态生成的li元素，从而导致querySelectorAll返回空结果。在浏览器开发者工具中能看到这些元素，是因为浏览器完整执行了所有JavaScript，渲染出了最终的DOM。
解决方案：使用Puppeteer处理动态内容
为了解决JSDOM无法处理动态内容的问题，我们需要一个能够模拟真实浏览器环境的工具。Puppeteer是一个由Google开发的Node.js库，它提供了一套高级API来通过DevTools协议控制Chrome或Chromium浏览器。这意味着Puppeteer能够：
加载网页并执行所有JavaScript。等待异步内容加载完成。模拟用户交互（点击、输入等）。截取屏幕截图或生成PDF。获取最终渲染的DOM内容。
Puppeteer实践示例
以下代码展示了如何使用Puppeteer来抓取动态加载的li元素：
const puppeteer = require('puppeteer');(async () => { // 1. 启动无头浏览器实例 // headless: true 表示在后台运行浏览器，不显示UI界面 const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); // 2. 访问网站首页 (可选，但可能解决某些网站的缓存/Cookie问题) // 某些网站会根据首次访问设置Cookie或Session，影响后续页面的内容 await page.goto('http://example.com', { waitUntil: 'domcontentloaded' }); // 等待DOM加载完成 // 3. 访问目标页面 await page.goto('https://example.com/targetpage', { waitUntil: 'networkidle2' }); // waitUntil: 'networkidle2' 会等待网络连接空闲2秒，通常意味着页面所有资源已加载完毕 // 也可以使用 'domcontentloaded' 或 'load'，具体取决于页面加载特性 // 4. 等待目标元素出现 // 这一步至关重要，确保动态加载的元素已经渲染到DOM中 await page.waitForSelector('#download-options li', { timeout: 5000 }); // 最多等待5秒 // 5. 查询元素并提取数据 // page.$ 用于查询单个元素 const ul = await page.$("#download-options ul"); // page.$$ 用于查询多个元素 const lis = await ul.$$("li"); console.log(`找到 ${lis.length} 个 li 元素。`); // 6. 遍历并提取每个 li 内部的 a 标签的 href 属性 for await (const li of lis) { const a = await li.$('a'); // 在每个 li 元素内部查询 a 标签 if (a) { // 使用 evaluate 方法在浏览器环境中执行JS代码来获取属性值 const hrefValue = await a.evaluate((el) => el.getAttribute('href')); console.log(`链接地址: ${hrefValue}`); } } // 7. 关闭浏览器实例 await browser.close();})();
代码解析与注意事项
puppeteer.launch({ headless: true }): 启动一个Chromium实例。headless: true表示无头模式，浏览器在后台运行，没有图形界面。在开发调试阶段，可以设置为false来观察浏览器行为。page.goto(url, { waitUntil: ‘networkidle2’ }): 导航到指定URL。waitUntil参数非常重要，它决定了Puppeteer何时认为页面加载完成。domcontentloaded: DOMContentLoaded事件触发时。load: load事件触发时。networkidle0: 当网络连接数变为0后持续至少500ms。networkidle2: 当网络连接数变为2后持续至少500ms。选择合适的waitUntil策略对于确保所有动态内容加载至关重要。networkidle2通常是一个比较稳妥的选择。page.waitForSelector(‘#download-options li’, { timeout: 5000 }): 这是解决动态内容问题的关键。它会暂停代码执行，直到指定的CSS选择器对应的元素出现在DOM中。如果元素在timeout时间内未出现，则会抛出错误。这确保了在尝试查询元素之前，它们已经被JavaScript渲染到页面上。page.$ 和 page.$$:page.$(selector): 类似于document.querySelector()，返回匹配的第一个ElementHandle对象。page.$$(selector): 类似于document.querySelectorAll()，返回所有匹配的ElementHandle对象数组。ElementHandle是Puppeteer对DOM元素的引用，它允许你在其上执行进一步的操作，如查询子元素或调用evaluate。element.evaluate((el) => el.getAttribute(‘href’)): evaluate方法允许你在浏览器上下文（即页面内部）执行一段JavaScript代码。这对于获取元素的属性、文本内容或执行更复杂的DOM操作非常有用，因为这些操作是在真实的浏览器环境中进行的。资源管理: 务必在抓取完成后调用browser.close()来关闭浏览器实例，释放系统资源。
总结
在进行网页抓取时，理解目标网站的内容加载机制至关重要。对于静态HTML内容，axios结合JSDOM是一个轻量且高效的选择。然而，一旦遇到由JavaScript动态渲染的内容，JSDOM就力不从心了。此时，Puppeteer作为无头浏览器自动化工具，能够完美模拟真实用户的浏览行为，执行页面JavaScript，并等待动态内容加载完成，从而成功抓取到完整的DOM结构和数据。正确选择工具并熟练运用page.waitForSelector等等待机制，是成功抓取动态网页内容的关键。
以上就是JSDOM查询NodeList为空：动态内容抓取策略与Puppeteer实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596910.html
微信扫一扫 
支付宝扫一扫 
