如何在PuppeteerJS中通过<ul>句柄遍历所有<li>获取文本内容？

嘿，我明白你遇到的问题了——你已经成功定位到了

元素，也拿到了7个
• 的句柄数组，但用for...in循环直接访问innerText行不通。这是因为两个关键点：
  1. for...in会遍历数组的索引和原型链上的属性，不是遍历数组元素的正确方式；
  2. Puppeteer的ElementHandle是浏览器元素的封装对象，不能直接访问DOM属性，必须通过evaluate方法在浏览器上下文里获取内容。

  给你几个可行的解决方案：

  方法1：用for...of循环逐个提取 #

  这是最直观的方式，逐个遍历每个

• 句柄，通过evaluate获取文本：

  const [detailElm] = await page.$x("/html/body/div[2]/table/tbody/tr/td/div/ul");
  const list = await detailElm.$x("li");
  
  for (const li of list) {
    // 在浏览器上下文里获取innerText
    const lineText = await li.evaluate(el => el.innerText);
    console.log(lineText);
  }
  

  方法2：用Promise.all批量提取（更高效） #

  如果想一次性获取所有文本，用Promise.all配合map会更高效，避免多次异步调用：

  const [detailElm] = await page.$x("/html/body/div[2]/table/tbody/tr/td/div/ul");
  const list = await detailElm.$x("li");
  
  const allTexts = await Promise.all(
    list.map(li => li.evaluate(el => el.innerText))
  );
  
  console.log(allTexts); // 输出包含7个文本的数组
  

  方法3：直接在

  的上下文里提取所有文本 #

  其实你可以跳过单独获取

• 句柄的步骤，直接在
  的evaluate里一次性提取所有
  • 的文本，代码更简洁：

    const [detailElm] = await page.$x("/html/body/div[2]/table/tbody/tr/td/div/ul");
    
    const allTexts = await detailElm.evaluate(ulElement => {
      // 把ul下的li转成数组，再提取每个的innerText
      return Array.from(ulElement.querySelectorAll("li")).map(li => li.innerText);
    });
    
    console.log(allTexts);
    

    选哪种方式都可以，根据你的需求来——如果需要逐个处理每个

  • 的内容，用方法1；如果只需要所有文本的数组，方法2或3更合适。

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