SPA环境下爬取更新后表格数据异常的技术求助

问题根源 #

SPA（单页应用）切换菜单时不会刷新整个页面，而是通过JavaScript动态更新DOM节点。你的爬虫代码只执行了一次，获取的是页面初始加载时的表格DOM；后续菜单切换后，虽然视觉上表格内容更新了，但你没有重新查询最新的DOM结构，所以始终拿到旧数据。

解决方案 #

下面提供几种可靠的实现方式，确保每次都能获取最新的表格数据：

1. 使用MutationObserver监听表格变化

通过监听表格节点的内容变化，一旦表格数据更新就自动触发抓取逻辑，这是最适配SPA动态DOM场景的方案：

// 定义抓取表格数据的函数
function scrapeTable() {
    const table = document.querySelector('table.i3WFpf');
    if (!table) {
        console.log("Table with class 'i3WFpf' not found.");
        return;
    }

    const rows = table.rows;
    const tableData = [];
    for (let i = 0; i < rows.length; i++) {
        let cells = rows[i].cells;
        let rowData = [];
        for (let j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText); 
        }
        tableData.push(rowData);
        console.log(`Row ${i + 1}:`, rowData);
    }
    return tableData; // 返回数据供爬虫使用
}

// 监听表格内容变化
function setupTableObserver() {
    const targetNode = document.querySelector('table.i3WFpf');
    if (!targetNode) {
        // 如果表格还没加载，先等按钮点击后再尝试
        document.getElementById('queries-process-button')?.addEventListener('click', () => {
            setTimeout(() => setupTableObserver(), 1000); // 等待表格渲染完成
        });
        return;
    }

    const config = { childList: true, subtree: true }; // 监听子节点和后代变化

    const observer = new MutationObserver((mutations) => {
        // 每次DOM变化时重新抓取数据
        console.log('表格内容已更新，重新抓取...');
        scrapeTable();
    });

    observer.observe(targetNode, config);
    console.log('表格监听已启动');
}

// 启动监听
setupTableObserver();

2. 每次操作后主动重新查询DOM

如果不需要实时监听，也可以在切换菜单/点击按钮后，主动调用抓取函数。关键是每次需要数据时都重新执行DOM查询，而不是复用之前的DOM引用：

// 封装成可重复调用的函数
function getLatestTableData() {
    const table = document.querySelector('table.i3WFpf');
    if (!table) return null;

    return Array.from(table.rows).map(row => 
        Array.from(row.cells).map(cell => cell.innerText)
    );
}

// 示例：切换菜单后调用（根据实际菜单选择器调整）
document.querySelector('.your-menu-selector')?.addEventListener('click', () => {
    // 等待DOM更新完成（时间根据页面渲染速度调整）
    setTimeout(() => {
        const latestData = getLatestTableData();
        if (latestData) {
            console.log('最新表格数据:', latestData);
            // 这里处理数据（比如传给爬虫逻辑）
        }
    }, 800);
});

// 点击按钮后也可以调用
document.getElementById('queries-process-button')?.addEventListener('click', () => {
    setTimeout(() => {
        const latestData = getLatestTableData();
        console.log('按钮触发后的表格数据:', latestData);
    }, 1000);
});

3. 等待数据加载完成的信号

有些SPA会在数据加载时添加加载状态类（比如loading），你可以监听这个状态消失后再抓取数据：

async function waitForTableReady() {
    while (true) {
        const table = document.querySelector('table.i3WFpf');
        const isLoading = document.querySelector('.loading-class') !== null; // 替换为实际加载类
        if (table && !isLoading) {
            return scrapeTable();
        }
        await new Promise(resolve => setTimeout(resolve, 200)); // 每200ms检查一次
    }
}

// 使用示例
waitForTableReady().then(data => {
    console.log('表格已准备好，数据:', data);
});

关键注意事项 #

• 永远不要复用之前获取的DOM节点引用（比如把table变量存在全局），每次抓取都要重新用document.querySelector查询最新的DOM。
• 根据页面的渲染速度调整等待时间（setTimeout的参数），避免在DOM还没更新时就执行抓取。
• 如果SPA使用了框架（比如React/Vue），DOM更新是异步的，所以必须等待更新完成后再操作。

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