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

Question

搜索querySelectorAll（）的文档我得到了这个：

  

NodeList对象，表示文档中的所有元素   匹配指定的CSS选择器。 NodeList是静态的   集合，意味着DOM中的变化对其没有影响   采集。如果选择器是，则抛出SYNTAX_ERR异常   无效。

如果删除某些元素该怎么办？然后由于动态html而出现新元素（与旧元素具有相同的类名）。

但是现在你想要访问新的。 我能重新运行querySelectorAll（）吗？或者旧元素将在数组中？

Answer 1

事件只能放在现有元素上，并且在元素不存在时不存在，因此您必须在创建元素后将事件分配给元素。避免重新分配的一个好方法是使用jQuery＆＃39; .on()。要么是这样，要么再做一个你再跑一次的功能。

Answer 2

您当然可以重新运行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。

结果：