编写TamperMonkey脚本：如何获取页面加载后Ajax异步加载的数据

你遇到的核心问题是代码执行时目标元素还未通过Ajax渲染到DOM中，下面是几种实用的解决方法：

1. MutationObserver监听DOM变化（推荐） #

这是处理异步DOM更新最可靠的方案，能实时监测元素的添加：

// 创建观察者实例，回调中检查目标元素
const observer = new MutationObserver(() => {
  const bookTime = document.querySelector(".timestamp");
  if (bookTime) {
    // 这里写拿到元素后的逻辑
    console.log("获取到时间戳：", bookTime.textContent);
    // 完成后可断开监听，避免重复触发
    observer.disconnect();
  }
});

// 配置监听规则：监听整个文档树的子节点新增
observer.observe(document.body, { childList: true, subtree: true });

如果知道目标元素的父容器，可以把document.body换成父容器的选择器，能提升监听效率。

2. 绑定搜索触发事件 #

如果能明确搜索的触发方式（点击按钮/回车），可以直接在事件后等待元素加载：

// 示例：监听搜索按钮点击
const searchBtn = document.querySelector(".search-btn");
if (searchBtn) {
  searchBtn.addEventListener("click", () => {
    // 延迟等待异步渲染，时间根据实际加载速度调整
    setTimeout(() => {
      const bookTime = document.querySelector(".timestamp");
      if (bookTime) {
        console.log("获取到时间戳：", bookTime.textContent);
      }
    }, 800);
  });
}

// 示例：监听输入框回车事件
const searchInput = document.querySelector(".search-input");
if (searchInput) {
  searchInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      setTimeout(() => {
        const bookTime = document.querySelector(".timestamp");
        if (bookTime) {
          console.log("获取到时间戳：", bookTime.textContent);
        }
      }, 800);
    }
  });
}

3. 定时轮询（简单兜底方案） #

如果前两种方法不适用，可定时检查元素是否存在：

const checkTimer = setInterval(() => {
  const bookTime = document.querySelector(".timestamp");
  if (bookTime) {
    console.log("获取到时间戳：", bookTime.textContent);
    clearInterval(checkTimer); // 找到元素后停止轮询
  }
}, 500); // 每500毫秒检查一次

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