gpt4 book ai didi

javascript - ElementHandle 与 DOM 元素有何不同?

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:30:07 28 4
gpt4 key购买 nike

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

但是 ElementHandle 上的文档有点欠缺。

它说它“代表一个 DOM 元素”,但这到底是什么意思?如果确实代表 DOM,为什么不能检查 ElementHandle 的内容?

它还说,“除非句柄被释放,否则防止 DOM 元素被垃圾回收。”如果浏览器仍在页面上,为什么 DOM 元素会被垃圾回收?


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

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

返回 undefined。所以我尝试了,

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

这引发了错误。

原来正确的做法是

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

最佳答案

使用 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();
})();

关于javascript - ElementHandle 与 DOM 元素有何不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50242653/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com