Javascript 木偶演员：获取DOM元素，该元素不是'；初始DOM中的t

我试图弄清楚如何在点击后加载图片的JS画廊中获取元素

我正在使用的演示作为一个例子。具有类

.viewer move.viewer transition

的元素不在初始DOM中。单击图像后，元素可用，但如果使用

$eval

则字符串为空。如果我在Puppeter浏览器中打开控制台并执行

document.querySelector（'.viewer move.viewer transition'）

我会得到元素，但在代码中元素不可用

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://fengyuanchen.github.io/viewerjs/');
    await page.click('[data-original="images/tibet-1.jpg"]');
    let viewer = await page.$eval('.viewer-move.viewer-transition', el => el.innerHTML);
    console.log(viewer);
})();

---

由于您必须等待，直到它可用，最方便的方法是使用

wait page.waitForSelector（“.viewer move.viewer transition”）

，它将等待元素添加到DOM中，尽管这有一个警告，即在元素添加到DOM时继续执行，即使它是空的/隐藏的。

因为您必须等待它可用，所以最方便的方法是使用

等待page.waitForSelector（“.viewer move.viewer transition”）

，它将等待元素添加到DOM中，尽管这有一个警告，即在元素添加到DOM时，即使它是空的/隐藏的，也会继续执行。

您会得到空字符串，因为元素没有内容，所以内部HTML是空的

outerHTML

似乎在工作：

const puppeter=require（'puppeter'）；
（异步函数main（）{
试一试{
const browser=wait puppeter.launch（{headless:false}）；
const[page]=wait browser.pages（）；
等待页面。转到（'https://fengyuanchen.github.io/viewerjs/');
等待页面。单击（“[data original=“images/digod-1.jpg”]”）；
wait page.waitForSelector（'.viewer move.viewer transition'）；
const viewer=wait page.$eval（'.viewer-move.viewer-transition'，el=>el.outerHTML）；
console.log（查看器）；
等待浏览器关闭（）；
}捕捉（错误）{
控制台错误（err）；
}
})();

您得到的是空字符串，因为元素没有内容，所以内部HTML是空的

outerHTML

似乎在工作：

const puppeter=require（'puppeter'）；
（异步函数main（）{
试一试{
const browser=wait puppeter.launch（{headless:false}）；
const[page]=wait browser.pages（）；
等待页面。转到（'https://fengyuanchen.github.io/viewerjs/');
等待页面。单击（“[data original=“images/digod-1.jpg”]”）；
wait page.waitForSelector（'.viewer move.viewer transition'）；
const viewer=wait page.$eval（'.viewer-move.viewer-transition'，el=>el.outerHTML）；
console.log（查看器）；
等待浏览器关闭（）；
}捕捉（错误）{
控制台错误（err）；
}
})();

在单击后尝试稍微延迟，以便有足够的时间加载元素。wait page.waitFor（毫秒数）也不起作用=/即使在单击和求值之间等待10秒，字符串仍然为空。请尝试在单击后稍微延迟，以便有足够的时间加载元素。wait page.waitFor（毫秒数）也不起作用=/即使我在单击和求值之间等待10秒，字符串仍然为空。我已在

单击（）和
$eval（）之间添加了
wait page.waitForSelector（.viewer move.viewer transition”）
但是
viewer
仍然是一个空字符串。我添加了
wait page.waitForSelector（“.viewer move.viewer transition”）
在
click（）
和
eval（）
之间，但是
viewer
仍然是一个空字符串。谢谢！我试图在
$eval
的回调中返回
el
，但得到了一个空对象，因此我认为该元素在
页面
中不可用。是的，返回空对象是因为HTML元素不可序列化，无法从浏览器上下文传输到Node.js（Puppeter）上下文。谢谢！我试图在
$eval
的回调中仅返回
el
，但得到了一个空对象，因此我认为该元素在
页面
中不可用。是的，返回空对象是因为HTML元素不可序列化，无法按原样从浏览器上下文传输到Node.js（Puppeter）上下文。