Question

page.$(selector)上的文档说它返回一个包含ElementHandle的promise。

但ElementHandle上的文档有点缺乏。

它说＆＃34;代表一个DOM元素＆＃34;，但这究竟意味着什么？如果确实代表了DOM，为什么不能检查ElementHandle的内容呢？

它还说，＆＃34;防止DOM元素被垃圾收集，除非处理掉句柄。＆＃34;如果浏览器仍然在页面上，为什么DOM元素会被垃圾收集？

这是因为我认为从页面上的元素中获取文本很简单，所以我试过了，

const text = await page.$('#text').textContent;

返回undefined。所以我试过了，

const text = await page.$('#text').textContent();

引发了错误。

原来正确的方法是

const text = await page.evaluate(() => document.querySelector('#text').textContent);

Answer 1

使用ElementHandle，您仍然可以访问textContent等属性，但以“Puppeteer方式”访问。首先，您必须.getProperty() ElementHandle，然后将其转换为.jsonValue()。请记住，所有这些操作都会返回poromises，所以你应该await这样做：

await (await (await page.$('#text')).getProperty('textContent')).jsonValue();

以下是完整的工作示例：

const puppeteer = require('puppeteer');

const html = `
<html>
  <body>
    <div id="text">Sample content</div>
  </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  const text = await page.evaluate(() => document.querySelector('#text').textContent);
  const text2 = await (await (await page.$('#text')).getProperty('textContent')).jsonValue();

  console.log(text);
  console.log(text2);

  await browser.close();
})();

ElementHandle与DOM元素有何不同？

1 个答案: