如何使用Puppeteer从flashScore提取指定div元素的id属性值

你通过$x获取到的是Puppeteer的ElementHandle对象数组，无法直接读取DOM属性，逐个提取属性值即可，修改后的完整可用代码如下：

const puppeteer = require('puppeteer');
const fs = require('fs');
const idList = []; // 存储最终提取到的id值

(async () => {
  const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] });
  const page = await browser.newPage();
  await page.goto(`https://www.flashscore.es/baloncesto/`);
  await delay(4000);
  // 获取所有符合id前缀规则的div元素数组
  const targetElements = await page.$x(`//div[starts-with(@id,'g_3_')]`);

  // 遍历元素数组提取id属性
  for (const el of targetElements) {
    const idValue = await (await el.getProperty('id')).jsonValue();
    idList.push(idValue);
  }

  // 打印所有匹配的id值
  console.log(idList);
  // 业务逻辑处理完成后关闭浏览器
  await browser.close();
})();

function delay(time) {
  return new Promise(function(resolve) { 
    setTimeout(resolve, time)
  });
}

关键逻辑说明 #

• getProperty('id')：从ElementHandle实例中获取对应DOM属性的JSHandle对象
• jsonValue()：将JSHandle对象转换为可直接操作的原生字符串值
• 你可以根据需求将最终得到的idList写入本地文件或做后续业务处理

稳定性优化建议 #

固定4000ms延时可能受网络波动影响出现元素未加载完成的情况，可以将delay(4000)替换为更可靠的等待逻辑：

// 最长等待10秒，直到第一个匹配的元素加载完成再批量获取
await page.waitForXPath(`//div[starts-with(@id,'g_3_')]`, { timeout: 10000 });

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