Puppeteer技术问题：如何从NodeList中获取元素HTML内容？

你遇到的问题是Puppeteer中浏览器上下文与Node.js上下文数据隔离导致的——这是个很常见的新手坑，我来给你拆解清楚：

为什么会出现undefined？ #

page.evaluate()的回调函数是在浏览器的渲染进程里执行的，而你在Node.js终端拿到的结果，是浏览器把DOM元素序列化后传回来的普通JS对象（也就是你看到的{ '0': {}, '1': {}, ... }），它已经不是真正的DOM元素了！自然没有innerHTML、innerText、length这些DOM特有的属性。

浏览器没法直接把整个DOM元素对象传给Node.js，只能序列化那些可以JSON.stringify的数据，所以最终拿到的就是个空壳对象。

正确的解决方法 #

根据你的需求，有两种常用方案：

方案1：在浏览器上下文直接提取需要的内容再返回

既然没法把DOM元素传到Node.js，那就在浏览器里把你要的HTML/文本先提取出来，再返回数组：

// 获取所有元素的innerHTML
const boxesHtml = await page.evaluate(() => {
  // 把NodeList转换成数组，再遍历提取内容
  return Array.from(document.querySelectorAll("DIV.a-row.dealContainer.dealTile"))
    .map(el => el.innerHTML);
});
console.log(boxesHtml); // 这里会得到30个元素的HTML内容数组，直接可用

如果需要多个属性，比如同时拿innerText和className，可以返回对象数组：

const boxesData = await page.evaluate(() => {
  return Array.from(document.querySelectorAll("DIV.a-row.dealContainer.dealTile"))
    .map(el => ({
      innerHTML: el.innerHTML,
      innerText: el.innerText.trim(),
      className: el.className
    }));
});
console.log(boxesData);

方案2：用ElementHandle在Node.js端操作DOM元素

如果你需要在Node.js端对这些元素做更多操作（比如点击、等待元素变化），可以用Puppeteer提供的ElementHandle（元素句柄），用page.$$()代替querySelectorAll：

// 获取元素句柄数组
const boxes = await page.$$("DIV.a-row.dealContainer.dealTile");
console.log(boxes.length); // 这里会正确输出30

// 遍历句柄，逐个获取内容
for (const box of boxes) {
  // 每个句柄都可以单独调用evaluate获取内部属性
  const innerHtml = await box.evaluate(el => el.innerHTML);
  console.log(innerHtml);
  
  // 也可以直接调用句柄的方法，比如点击
  // await box.click();
}

总结 #

你的核心错误就是混淆了Puppeteer的两个上下文：浏览器上下文（page.evaluate()内部）和Node.js上下文（外部）。记住：不要试图把DOM元素从浏览器传到Node.js，要么在浏览器里处理好数据再返回，要么用ElementHandle来间接操作。

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