使用JavaScript自动填写多页表单时DOM未加载致元素获取失败的解决咨询

你的问题核心是：点击第一页下一页后，第二页的内容是动态渲染的，此时直接调用getElementById会因为元素还没插入DOM而返回null；而DOMContentLoaded只监听初始页面的加载完成，对后续动态插入的内容无效，同时completion函数因为没等到有效操作触发超时。

具体解决方案 #

不用依赖DOMContentLoaded，而是通过监听DOM变化，等待目标元素出现后再执行操作，同时确保completion在元素操作完成后调用：

1. 先写一个通用的元素等待工具函数：

function waitForElement(targetId, callback) {
  // 先检查元素是否已存在
  const element = document.getElementById(targetId);
  if (element) {
    callback(element);
    return;
  }
  // 用MutationObserver监听DOM树变化
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // 遍历新增的节点
      for (const node of mutation.addedNodes) {
        if (node.id === targetId) {
          observer.disconnect(); // 找到元素后停止监听
          callback(node);
          return;
        }
        // 检查节点的子元素
        const child = node.getElementById(targetId);
        if (child) {
          observer.disconnect();
          callback(child);
          return;
        }
      }
    }
  });
  // 监听body下所有子元素的变化
  observer.observe(document.body, { childList: true, subtree: true });
}

2. 修改你的自动化脚本：

// Page 1：点击进入第二页
document.getElementById("NextButton").click();

// 等待第二页的Receipt.1元素出现后执行操作
waitForElement("Receipt.1", (receiptElement) => {
  receiptElement.setAttribute("aria-checked", true);
  // 确保元素操作完成后再调用completion，避免超时
  completion();
  // 点击进入下一页
  document.getElementById("NextButton").click();
});

关键说明 #

• 动态加载的内容不会触发DOMContentLoaded，所以必须通过MutationObserver监听DOM的新增节点，直到目标元素出现。
• completion函数要放在元素操作成功之后调用，确保它能识别到有效操作，避免超时提示。

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