本文介绍通过模拟滚动到底部并配合延迟重试，触发无限滚动加载全部内容，从而获取页面中所有（而非仅视口内）目标元素的文本数据。
本文介绍通过模拟滚动到底部并配合延迟重试，触发无限滚动加载全部内容，从而获取页面中所有（而非仅视口内）目标元素的文本数据。
在实际开发中，许多现代网站（如视频画廊、商品列表或社交动态流）采用无限滚动（infinite scroll） 而非静态渲染——即仅在用户滚动接近底部时，才异步加载新内容并插入 DOM。这导致 document.querySelectorAll() 仅能捕获当前已渲染的节点（例如初始的 70 个 .video-count 元素），而无法获取尚未加载的其余 620 个。
要完整提取全部 690 条视频观看数，核心思路是：主动触发加载逻辑。由于多数无限滚动依赖 scroll 事件监听 + 滚动位置判断（如 window.scrollY + window.innerHeight >= document.body.scrollHeight），我们可通过 JavaScript 模拟“滚动至页面底部”来唤醒加载器。
以下为推荐实现方案（含健壮性优化）：
async function fetchAllVideoCounts() {
const targetSelector = ".DivItemContainerV2 .video-count";
let counts = [];
// 第一次滚动到底部
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
// 等待首次加载完成（通常 2–3 秒）
await new Promise(resolve => setTimeout(resolve, 3000));
// 再次滚动（应对分批加载场景）
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
await new Promise(resolve => setTimeout(resolve, 2500));
// 可选：第三次滚动 + 防止遗漏（尤其在网速慢或加载延迟高时）
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
await new Promise(resolve => setTimeout(resolve, 2000));
// 此时绝大多数内容应已加载完毕，提取全部元素
const allElements = document.querySelectorAll(targetSelector);
counts = Array.from(allElements).map(el => el.innerText.trim());
console.log(`共提取 ${counts.length} 条视频观看数`);
return counts;
}
// 调用示例
fetchAllVideoCounts().then(videoCounts => {
// 处理结果，如导出为 CSV、发送至后端等
console.table(videoCounts.slice(0, 10)); // 打印前 10 条预览
});
✅ 关键注意事项：
- 避免硬编码超大数值：原答案中 scroll(0, 10000000) 不够健壮，应改用 document.body.scrollHeight 动态计算真实底部位置；
- 启用平滑滚动：behavior: 'smooth' 更贴近真实用户行为，部分站点的加载监听器可能对突兀跳转不敏感；
- 等待时机需合理：各 setTimeout 间隔应根据目标网站实际加载耗时调整（可先手动观察加载完成时间）；
- 防重复/未加载风险：建议在最终提取前加入简单重试逻辑（如检查 document.querySelectorAll(...).length 是否稳定）；
- 遵守 robots.txt 与服务条款：自动化抓取需确保符合网站使用政策，生产环境建议添加请求节流与用户代理标识。
该方法不依赖外部库，纯原生 JavaScript 实现，适用于调试、数据采集脚本或浏览器控制台快速执行，是处理无限滚动页面数据提取的经典实践。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
