JS爬取动态筛选数据表时DOM无标识变化的解决方法

这类下拉筛选后URL不变、仅更新DOM内容的站点，不需要找DOM上的年份标识，按下面三种方法任选其一就能实现全量数据爬取：

方法1：直接抓异步数据接口（效率最高，优先用） #

• 打开浏览器开发者工具，切换到「Network」面板，选择Fetch/XHR类型过滤，先清空面板里的现有请求记录
• 手动操作下拉菜单切换任意一个非当前显示的年份，观察面板中新出现的请求
• 逐个查看请求的响应内容，找到返回对应年份得分榜数据的请求，记录下请求地址、请求方法、携带的参数——这类站点基本都会把选中的年份作为请求参数传递，常见参数名是seasonid、year、season这类
• 后续直接构造不同年份参数的请求即可拿到全量数据，不需要操作页面DOM。

方法2：断点定位前端全量数据源 #

如果切换年份时没有发新的网络请求，说明所有历年数据已经在首次加载页面时就存在前端内存里，只是切换下拉时才渲染到DOM上：

• 在Elements面板找到#leaders表格元素，右键选择「Break on」->「subtree modifications」，给DOM加子树修改断点
• 切换一次年份，代码执行到修改表格内容的步骤时会自动触发断点，此时顺着调用栈往上找，就能定位到存储全量历年数据的JS变量，直接读取变量内容就能拿到所有年份的数据，不需要逐年切换。

方法3：模拟下拉操作逐页抓取（逻辑最简单） #

如果不想分析接口或者找数据源，直接模拟用户操作下拉菜单即可，不需要DOM上有年份区分标识：

• 先定位到年份选择的下拉框元素（通常是<select>标签），读取所有<option>的value属性和对应显示的年份文本，存成「年份-选项值」的映射表
• 写循环逻辑遍历所有年份选项：每次给下拉框设置对应选项的value，手动触发change事件，等表格内容更新完成后，读取当前#leaders表格的内容存储即可
• 触发下拉选择的核心代码参考：

// 替换成你页面上年份下拉框的实际选择器
const seasonSelect = document.querySelector('select[name="seasonid"]');
// 设置为目标年份对应的option值
seasonSelect.value = '2022';
// 触发原生change事件，让页面执行数据更新逻辑
seasonSelect.dispatchEvent(new Event('change', { bubbles: true }));

注意：切换年份后DOM更新需要一定时间，不要设置完值立刻读表格，要么加300-500ms的固定延时，要么用MutationObserver监听#leaders的子节点变化，等渲染完成后再抓取，避免拿到空数据或者上一年的残留数据。

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