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

Question

搜索文档为querySelectorAll（）我得到了：

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

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

但是现在您要访问新的。 我可以重新运行querySelectorAll（）吗？ 还是旧元素将在数组中？

Answer 1

事件只能放在现有元素上，而当元素不存在时就不存在，因此在制作事件后必须将事件分配给元素。 避免重新分配的一个好方法是使用jQuery的.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。

结果：