使用JS获取HTML页面元素时请求结果与Elements面板不一致如何解决

内容差异的原因 #

• 浏览器「Elements」面板展示的是页面完整渲染后的最终DOM树，包含JavaScript动态执行、异步请求拉取后插入的内容；而axios仅会请求获取服务器返回的原始静态HTML，不会执行页面内的JS逻辑，也不会触发后续的数据请求，因此缺少动态生成的目标内容。
• 部分站点存在反爬校验，当请求缺少浏览器正常请求携带的User-Agent、Cookie、Referer等标识时，服务器会返回简化版页面、拦截页，也会导致返回内容和浏览器看到的不一致。

解决方案 #

方案1：直接请求动态数据接口（优先选择） #

打开浏览器Network面板，筛选「XHR/ Fetch」分类，刷新页面后查找加载目标数据的异步接口，这类接口通常返回JSON格式数据，直接用axios请求该接口即可，效率远高于解析HTML页面。请求时需和浏览器请求头保持一致，补齐必要的标识参数避免被拦截，示例代码如下：

async function fetchData(apiUrl) {
  const response = await axios.get(apiUrl, {
    headers: {
      // 替换为自己浏览器当前的User-Agent
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
      'Referer': '目标页面的源URL'
    },
    // 必要时可携带站点生成的Cookie
    withCredentials: true
  });
  console.log(response.data)
}

方案2：使用无头浏览器模拟页面渲染 #

如果数据接口加密、参数签名逻辑复杂无法直接调用，可以使用Puppeteer、Playwright等无头浏览器工具，这类工具会启动真实的浏览器内核，完整执行页面JS、渲染所有动态内容，最终可以拿到和Elements面板完全一致的DOM内容，示例代码如下：

const puppeteer = require('puppeteer');
async function getRenderedContent(pageUrl, targetSelector) {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  // 访问页面，等待网络空闲确保所有内容加载完成
  await page.goto(pageUrl, { waitUntil: 'networkidle2' });
  // 提取目标元素内容
  const targetText = await page.$eval(targetSelector, el => el.textContent.trim());
  console.log(targetText);
  // 关闭浏览器
  await browser.close();
}

技术方案选择说明 #

如果可以拿到明确的异步数据接口，优先使用axios直接请求接口即可，不需要额外技术方案；如果目标内容是纯前端渲染、无法拿到独立数据接口，就需要切换到无头浏览器的技术方案实现爬取。

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