Puppeteer - 使用 querySelectorAll() 访问动态 HTML 环境中的元素

Question

在文档中搜索 querySelectorAll() 我得到了这个：

一个 NodeList 对象，代表文档中的所有元素 匹配指定的 CSS 选择器。 NodeList 是静态的 集合，这意味着 DOM 中的更改对 收藏。如果选择器是，则抛出 SYNTAX_ERR 异常 无效。

如果删除一些元素会怎样。然后由于动态 html 出现新元素（与旧元素具有相同的类名）。

但现在您想访问新的。 我可以重新运行 querySelectorAll() 吗？还是旧元素会在数组中？

Answer 1

您当然可以重新运行querySelectorAll()，并且每次它都会返回当前与查询相对应的元素——重要的是您必须重新运行它以获取新元素。

一个例子：

(async() => { 

    // ... usual create browser and page stuff

    var items = [];
    while(items = await page.$$eval('p', pp => pp.map( p => p.textContent ) ))
    {
        console.log(items);        
        await page.waitFor(1000);
    }
})()

page.$$eval 在页面内运行 Array.from(document.querySelectorAll(selector)) 并将其作为第一个参数传递给 pageFunction。

结果：

Answer 2

事件只能放在现有元素上，当元素不存在时不存在，因此您必须在制作后将事件分配给元素。避免重新分配的一个很好的解决方案是使用 jQuery 的.on()。要么，要么创建一个你刚刚再次运行的函数。