在动态加载的页面上使用 Javascript 单击所有按钮

Question

我正在尝试编写一个 javascript 代码，单击https://www.teamblind.com/上讨论线程中的所有按钮，这样我就可以看到所有评论，而无需单击按钮展开它们。

我发现我可以通过执行以下操作来单击所有按钮

var bs = document.getElementsByClassName('btn_more');
bs[0].click(); 

在控制台中，我只需要重复运行 bs[0].click(); 直到剩下一个元素，但是当我将其变成如下所示的 while 循环时

function clickall() {
var bs = document.getElementsByClassName('btn_more');
while (bs.length > 1 ) { // 1 because the last button directs to other page, all other buttons expands the contents in the current thread
bs[0].click(); 
}
  return;
}

当我在 Web 控制台中运行此功能时，浏览器选项卡实际上会停止工作，我不得不使用任务管理器关闭浏览器进程以停止在控制台中运行此功能。

我的猜测之一是页面动态加载，也许我需要等待页面展开？ 有谁知道为什么选项卡可以挂起运行这样的功能以及应该如何修复？

编辑：单击按钮会减小bs大小

记录bs大小

Answer 1

点击后 btn 本身可能不会被删除，它可能变得不可见。 除此之外，按钮在循环之前已经被收集，所以如果它们被删除，这可能是导致错误的原因，无法找到的节点正在应用函数。 因此for...each在 while 循环内使用for...each循环或查询元素。

Answer 2

所以首先不需要while循环。 让我们用if来做：

function clickall() {
  var bs = document.getElementsByClassName('btn_more');

  // 1 because the last button directs to other page,
  // all other buttons expands the contents in the current thread
  if ( bs.length > 1 ) {
    bs[0].click(); 
  }
}

所以我们只点击一次这个按钮。 现在我们可以定期运行该代码：

// You can stop the loop with window.clearInterval(intervalHandle); when you want.
let intervalHandle = window.setInterval(clickall, 500);

进一步阅读：

• document.getElementsByClassName
• window.setInterval
• window.clearInterval