递归调用getElementsByClassName返回空？DOM存在目标元素却无法获取

在 derStandard 新闻页面运行用户脚本时，需要实现以下功能：

• 点击留言板底部的Weitere Postings laden（加载更多帖子）按钮，操作后可能出现同类新按钮或更多第2类按钮；
• 点击长帖末尾的Weitere Antworten anzeigen（显示更多回复）按钮，操作后可能出现更多同类按钮；
• 递归调用函数重复上述操作，直到getElementsByClassName('thread--more').length == 0。

实际运行问题：
首次运行函数正常，但第二次调用时，明明DOM中存在thread--more类的按钮（已通过Ctrl+F和Firefox DOM检查器确认），getElementsByClassName('thread--more').length却返回0。即使改用setTimeout(clickMore( forum ), 10000)，结果依然相同，嵌套setTimeout似乎无效。

1. 修正setTimeout调用错误 #

你写的setTimeout(clickMore( forum ), 10000)是典型错误——这会立即执行clickMore(forum)，把函数返回值传给setTimeout，根本没起到延迟执行的作用。正确写法是把函数包装成回调：

// 箭头函数包裹
setTimeout(() => clickMore(forum), 10000);
// 或者用bind绑定参数
setTimeout(clickMore.bind(null, forum), 10000);

2. 改用更可靠的DOM查询与监听方式 #

getElementsByClassName返回的是动态HTMLCollection，但异步加载的元素可能还没完成渲染就被查询，导致拿不到结果。建议用以下两种方式优化：

方式一：静态查询+延迟等待 #

用document.querySelectorAll('.thread--more')获取静态NodeList，配合合理的延迟等待DOM更新：

function clickMore(forum) {
  const btns = forum.querySelectorAll('.thread--more');
  if (btns.length === 0) return;

  // 点击所有可用按钮
  btns.forEach(btn => {
    if (!btn.disabled) btn.click();
  });

  // 延迟1秒后递归调用，给DOM更新留时间
  setTimeout(() => clickMore(forum), 1000);
}

方式二：用MutationObserver监听DOM变化 #

固定延迟可能不稳定（网络慢时元素加载更久），用MutationObserver可以精准监听新按钮的加载：

function clickMore(forum) {
  const btns = forum.querySelectorAll('.thread--more');
  if (btns.length === 0) return;

  // 点击所有按钮
  btns.forEach(btn => btn.click());

  // 监听留言板容器的DOM变化
  const observer = new MutationObserver((mutations) => {
    const newBtns = forum.querySelectorAll('.thread--more');
    if (newBtns.length > 0) {
      observer.disconnect(); // 停止监听，避免重复触发
      clickMore(forum);
    } else {
      observer.disconnect(); // 没有更多按钮，结束流程
    }
  });

  // 监听容器内的子元素变化，包括嵌套层级
  observer.observe(forum, { childList: true, subtree: true });
}

3. 替换递归为循环，避免栈溢出 #

递归调用次数过多可能触发栈溢出，改用异步循环更稳定：

async function clickAllMoreButtons(forum) {
  let hasMoreButtons = true;
  while (hasMoreButtons) {
    const btns = forum.querySelectorAll('.thread--more');
    if (btns.length === 0) {
      hasMoreButtons = false;
      break;
    }

    // 逐个点击按钮，每个点击后短暂等待
    for (const btn of btns) {
      if (btn.style.display !== 'none' && !btn.disabled) {
        btn.click();
        await new Promise(resolve => setTimeout(resolve, 600));
      }
    }

    // 等待一轮点击后DOM完成更新
    await new Promise(resolve => setTimeout(resolve, 1200));
  }
}

// 调用示例：先获取留言板容器
const forumContainer = document.querySelector('.forum');
clickAllMoreButtons(forumContainer);

内容的提问来源于stack exchange，提问作者Gerold Broser