如何使用Fetch API获取动态加载页面的DOM内容？

我正在开发一项功能，让类似亚马逊商品页面的分页站点支持基于Fetch API的无限滚动。按照亚马逊的规则，修改URL中的page参数（比如2、3、4）就能切换页面。我想借助这个机制，不用点击按钮，直接用Fetch API获取下一页的商品信息，再把它作为DOM处理。

我做了初步尝试，在开发者工具控制台执行了以下代码：

fetch('https://www.amazon.com/s?k=python&page=3')
    .then(res => res.text())
    .then(text => new DOMParser().parseFromString(text, 'text/html'))
    .then(document => {
        console.log(document)
  });

但查看控制台返回的信息时，我在DOM里找不到预期的商品信息——原来初始加载的HTML里根本没有这些内容，商品信息是页面加载后动态渲染出来的。请问怎么用Fetch API获取到动态加载后的HTML信息？

你直接用Fetch拿到的是服务器返回的初始静态HTML，而亚马逊的商品列表是页面加载完成后，通过JavaScript发送额外请求获取数据再渲染到页面上的，所以初始HTML里自然没有商品内容。下面给你两种可行的解决思路：

方法1：抓取亚马逊的商品数据接口（推荐） #

亚马逊切换分页时，并不会直接返回完整的渲染后页面，而是通过XHR/Fetch请求专门的商品数据接口（通常是JSON格式），再用JS把数据渲染成DOM。直接请求这个接口比处理HTML更高效。

操作步骤：

• 打开亚马逊搜索页，切换到目标分页（比如第3页）
• 打开浏览器开发者工具的「网络」面板，筛选「XHR/Fetch」类型的请求
• 找到返回商品数据的请求（通常URL里带有ajax、search或items关键词）
• 复制该请求的URL和请求头（尤其是User-Agent、Cookie这些字段，亚马逊会验证请求的合法性）
• 用Fetch请求这个接口，直接拿到结构化的商品数据，再自己渲染到页面

示例代码（以找到的实际接口为例）：

fetch('https://www.amazon.com/s/ajax/ref=sr_pg_3?k=python&page=3', {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
    'Cookie': '这里复制你浏览器中的亚马逊Cookie'
  }
})
.then(res => res.json())
.then(data => {
  console.log(data); // 这里就是包含商品信息的结构化数据
  // 接下来可以根据数据生成DOM元素，添加到页面中
});

方法2：用无头浏览器获取渲染后的完整DOM #

如果一定要拿到渲染后的HTML，纯前端的Fetch做不到——因为Fetch只会获取初始HTML，不会执行页面中的JavaScript。这时候可以使用无头浏览器工具（比如Puppeteer），它会模拟完整的浏览器环境，加载页面并执行所有JS，然后返回渲染后的完整DOM。

示例代码（Node.js环境下）：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 打开目标页面，等待网络请求完成（确保商品渲染完毕）
  await page.goto('https://www.amazon.com/s?k=python&page=3', { waitUntil: 'networkidle2' });
  
  // 获取渲染后的完整HTML
  const renderedHTML = await page.content();
  const doc = new DOMParser().parseFromString(renderedHTML, 'text/html');
  
  // 现在可以从doc中提取商品元素了
  const productItems = doc.querySelectorAll('[data-asin]');
  console.log(`找到${productItems.length}个商品`);
  
  await browser.close();
})();

注意事项 #

• 亚马逊有严格的反爬机制，频繁请求可能会被限制访问，建议控制请求频率，并且用真实浏览器的请求头模拟正常用户行为
• Cookie存在过期时间，需要定期更新，否则请求会被拒绝

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