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

【问题标题】：How to use JavaScript to get all element from a dynamic scroll list?如何使用 JavaScript 从动态滚动列表中获取所有元素？
【发布时间】：2020-04-13 00:53:20
【问题描述】：

如标题所说，如何从一个滚动的 div 中获取所有元素？ 滚动列表中的元素是动态加载和销毁的。

我试图从这个网站上抓取所有课程名称： 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() 是异步工作的吗？但我尝试使用异步和等待。还是不行。

【问题讨论】：

console.log(childs[0].innerText) 你是说console.log(childs[i].innerText) 吗？使用[0]，是的，您每次都会得到相同的结果，因为您访问的是同一个元素
好吧，但是列表是滚动的，所以即使是 childs[0] 也会有所不同，因为它是一个动态列表

标签： javascript node.js web-crawler single-page-application puppeteer

【解决方案1】：

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

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

测试函数/方法的返回值总是好的 - 特别是在程序开发期间。

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

你质疑 “我如何从滚动 div 中获取所有元素？” 太“松散”了。滚动div？这个问题的答案，独立于“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*/ 
}

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

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

【讨论】：

谢谢丹尼尔：）

【解决方案2】：

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

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

请阅读这篇文章，非常有帮助。

【讨论】：