访问从 Chrome 扩展程序动态更新的 DOM

Question

我正在使用 Chrome 扩展程序从一个站点抓取数据。网站上有一个“加载更多”div，可在点击时加载接下来的 30 条记录。我使用下面的代码单击并加载数据：

内容.js

setTimeout(function(){
  var activityTab = document.getElementsByClassName("loadMore")[0];
  activityTab.click();
}, 5000);

它加载接下来的 30 条记录并生成一个新的“加载更多”div，但我无法单击这个新的动态加载的“加载更多”div。如何在 JavaScript 中访问原始站点中动态生成的 HTML？我只能访问页面加载时原始站点的 DOM 中可用的数据。

Answer 1

天真地这是一种实现你想要的方式：

function doSomething(startIndex, items) {
    for (let i = startIndex; i < items.length; i++) {
        //Crawl the data
    }
}

var selector = ".myfancystuff"; //This is just test data, change this selector to one which is more appropriate to your case
var items = document.querySelectorAll(selector);
var activityTab = document.getElementsByClassName("loadMore")[0];
activityTab.click();
setTimeout(function() {
    var newItems = document.querySelectorAll(selector);
    if (newItems.length > items.length) {
        doSomething(items.length, items = newItems);
        activityTab.click();
    }
}, 1000);

当然，在大多数情况下，您可以做得更优雅，也就是说，在这种情况下，需要有关该站点的更多信息。