如何在for循环中用MutationObserver监听元素以批量处理按钮点击？

你的代码问题出在同步循环没有等待异步的模态框操作完成，再加上重复绑定监听、提前断开Observer，导致只处理第一个按钮就停了。具体问题点：

• for循环是同步执行的，点击第一个Connect后，还没等模态框弹出处理完，就立刻去触发后续按钮的点击，但最后直接调用observer.disconnect()关闭了所有监听，自然只有第一个操作能生效。
• 每次循环都重复调用observer.observe()监听同一个模态框，会导致监听逻辑混乱冲突。

修正后的代码 #

把等待模态框并点击Send的逻辑封装成异步函数，让循环每次都等前一个操作完成再继续：

async function connect(): Promise<void> {
  const connectBtns = document.querySelectorAll<HTMLElement>(".connect");

  // 封装等待模态框并点击Send的异步逻辑
  async function handleModal(): Promise<void> {
    return new Promise((resolve) => {
      const observer = new MutationObserver((_, obs) => {
        const sendBtn = document.querySelector<HTMLElement>(".send");
        // 确认按钮存在且文本匹配
        if (sendBtn && sendBtn.textContent?.trim() === "Send") {
          sendBtn.click();
          // 完成后断开当前监听，避免残留
          obs.disconnect();
          // 通知Promise完成，循环继续
          resolve();
        }
      });

      const modal = document.querySelector("#modal");
      if (modal) {
        observer.observe(modal, {
          childList: true,
          subtree: true,
          characterData: true,
        });
      } else {
        resolve();
      }
    });
  }

  // 逐个处理按钮，确保前一个流程完成再走下一个
  for (const btn of connectBtns) {
    if (btn.textContent?.trim() === "Connect") {
      btn.click();
      await handleModal();
      // 可选：加小延迟避免页面响应不及时
      await new Promise(resolve => setTimeout(resolve, 500));
    }
  }
}

关键改进点 #

• 用Promise包装MutationObserver，让循环可以通过await等待前一个按钮的完整流程（点击Connect→等模态框→点Send）完成后，再处理下一个。
• 每次处理一个按钮时创建独立的Observer，完成后立刻断开，避免多个监听互相干扰。
• 增加trim()处理按钮文本，避免空格导致的匹配失败。
• 可选的延迟设置，防止页面因操作过快出现无响应问题。

内容的提问来源于stack exchange，提问作者Amrik Malhans