如何无需手动滚动，在JavaScript中获取所有网格子项的视频浏览量

方法一：自动滚动加载所有内容后抓取 #

这种方法通过模拟滚动到底部触发懒加载，等待新内容加载完成，直到没有新元素出现，再一次性抓取所有数据。

async function loadAllVideoCounts() {
  let lastLoadedCount = 0;
  // 循环滚动直到内容加载完毕
  while (true) {
    // 滚动到当前页面最底部
    window.scrollTo(0, document.body.scrollHeight);
    // 等待页面加载新内容，时间可根据网站加载速度调整（500ms-2000ms）
    await new Promise(resolve => setTimeout(resolve, 1000));
    // 获取当前已渲染的目标元素数量
    const currentCount = document.querySelectorAll(".DivItemContainerV2 .video-count").length;
    // 如果数量不再变化，说明所有内容已加载完成
    if (currentCount === lastLoadedCount) break;
    lastLoadedCount = currentCount;
  }
  // 收集所有视频浏览量文本
  const allCounts = Array.from(document.querySelectorAll(".DivItemContainerV2 .video-count"))
    .map(el => el.innerText);
  console.log(allCounts);
  return allCounts;
}

// 执行函数
loadAllVideoCounts();

说明 #

• 滚动操作会触发网站的懒加载逻辑，自动加载隐藏的图片和对应数据
• 等待时间需根据网站实际加载速度调整，避免因加载未完成导致漏抓
• 当元素数量不再增加时终止循环，确保所有内容都已渲染

方法二：用MutationObserver监听DOM变化自动收集 #

通过监听页面DOM的动态变化，自动捕获新添加的元素并收集数据，无需手动滚动。

function collectAllVideoCounts() {
  const videoCounts = [];
  // 先收集当前已显示的元素数据
  const initialElements = document.querySelectorAll(".DivItemContainerV2 .video-count");
  initialElements.forEach(el => videoCounts.push(el.innerText));

  // 找到承载所有网格项的父容器（需根据网站实际结构调整选择器）
  const targetContainer = document.querySelector(".DivItemContainerV2").closest("div");

  // 创建DOM变化监听器
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 遍历所有新增的节点
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 查找新增节点中的目标元素
          const countElements = node.querySelectorAll(".video-count");
          countElements.forEach(el => {
            const countText = el.innerText;
            // 避免重复添加相同数据
            if (!videoCounts.includes(countText)) {
              videoCounts.push(countText);
            }
          });
        }
      });
    });
    // 已知总数量为690，达到后停止监听
    if (videoCounts.length >= 690) {
      observer.disconnect();
      console.log(videoCounts);
    }
  });

  // 配置监听选项：监听子节点变化及子树变化
  observer.observe(targetContainer, {
    childList: true,
    subtree: true
  });

  // 超时兜底：30秒后自动停止监听（可根据实际调整）
  setTimeout(() => {
    observer.disconnect();
    console.log(videoCounts);
  }, 30000);
}

// 执行函数
collectAllVideoCounts();

说明 #

• 无需滚动页面，自动捕获网站动态添加的元素
• 需要正确找到承载网格项的父容器，否则无法监听到新元素
• 可通过已知的总数量（690）或超时时间终止监听，避免无限等待

方法三：直接调用网站数据接口（效率最高） #

多数滚动加载的网站会通过AJAX接口获取数据，直接请求接口可跳过DOM渲染步骤，快速获取所有数据。

1. 打开浏览器开发者工具（F12），切换到「Network」标签
2. 滚动页面，找到加载数据的API请求（通常是XHR/Fetch类型，URL包含page、limit等参数）
3. 复制请求URL和必要的请求头（如Cookie、Authorization），用fetch循环请求所有页面

示例代码：

async function fetchAllVideoCounts() {
  const videoCounts = [];
  let currentPage = 1;
  const pageSize = 30; // 根据接口参数调整

  while (true) {
    try {
      // 替换为实际的API接口URL
      const response = await fetch(`https://your-site.com/api/videos?page=${currentPage}&limit=${pageSize}`, {
        headers: {
          // 添加必要的请求头，如Cookie、User-Agent等
          "Cookie": document.cookie,
          "User-Agent": navigator.userAgent
        }
      });
      const data = await response.json();
      // 若返回数据为空，说明已加载完所有内容
      if (!data || data.length === 0) break;
      // 从返回数据中提取视频浏览量（需根据接口返回结构调整）
      data.forEach(item => videoCounts.push(item.videoCount.toString()));
      currentPage++;
    } catch (error) {
      console.error("请求失败:", error);
      break;
    }
  }
  console.log(videoCounts);
  return videoCounts;
}

// 执行函数
fetchAllVideoCounts();

说明 #

• 效率最高，无需等待DOM渲染
• 需要分析网站的API接口结构，可能需要处理登录验证、请求签名等逻辑
• 接口参数和返回结构需根据实际网站调整

内容的提问来源于stack exchange，提问作者DrPaulVella