如何使用 JavaScript 从动态滚动列表中获取所有元素？

Question

如题所说，如何获取一个scroll中的所有元素div？ scroll列表中的元素加载销毁动态地。

我试图从该网站抓取所有课程名称： https://public.enroll.wisc.edu/search?term=1204

以下代码只能使用一次：

let list = document.getElementsByClassName('md-virtual-repeat-scroller')[0]
let childs = document.getElementsByClassName("result__name")
console.log(childs[0].innerText)

但是，如果我这样做，我将得到相同的结果 10 次：

let list = document.getElementsByClassName('md-virtual-repeat-scroller')[0]
for(let i = 0; i < 10; i++) {
    let childs = document.getElementsByClassName("result__name")
    for(let j = 0; j < childs.length; j++) {
        console.log(childs[j].innerText) 
    }
    // scroll by 1000px every time
    list.scrollBy(0, 1000) 
}

我不知道是什么问题。是因为 scrollBy() 工作异步吗？但是我尝试使用异步和等待。还是不行。

Answer 1

尽可能用更少的文字提供更多信息。例如，许多问题可能与浏览器及其版本有关。这个脚本怎么调用？您是通过浏览器控制台发出命令吗？您是否复制了站点并对其进行了一些修改？很难在现实层面上理解这个问题。

提示：避免使用 innerText。它速度较慢，并且在许多浏览器中都受支持，只是为了兼容为旧版本 IE 编写的脚本。（我不知道为什么互联网上有那么多示例将其用作首选）。改为用户 textContent。

测试 function/methods 的返回值总是好的 - 特别是在程序开发期间。

永远不要要求 Whosebug 社区（以及任何其他社区）为您编写程序！

你的问题"how do I get all elements from a scroll div?"是这样"loose"。滚动div？这个问题的答案，独立于 "type of div"（和标签！）可以在下面找到。

您的代码似乎没有意义，无法执行您想要的操作。为什么要从 0 迭代到 10？

看看这个片段。我想它会对你有所帮助

const list = document.getElementsByClassName('md-virtual-repeat-scroller')[0];// if there is no intention to reassign it. Use [0] if you are sure it's the first element of this collection
let childs = list.getElementsByClassName("result__name"); // get only elements inside the first variable!

使用变量的迭代器。

for(item of childs) 
{
 /*code*/ 
}

我相信你会实现你的目标！

永远不要建议我们（社区）为您编写代码，甚至不要建议我们解决您的问题。这听起来很有攻击性！也给你！我确定。

Answer 2

我通过阅读这篇文章解决了我的问题：https://intoli.com/blog/scrape-infinite-scroll/

我一直获取相同元素的原因是 scrollBy() 异步工作，所以我必须等待然后再次评估页面。顺便说一句，我正在使用puppeteer。

请阅读文章，超级有帮助。

如何使用 JavaScript 从动态滚动列表中获取所有元素？

How to use JavaScript to get all element from a dynamic scroll list?

javascript

web-crawler

node.js

single-page-application

puppeteer