如何在模拟JavaScript的Click()后执行代码获取后端返回数据？

针对你遇到的点击开关后立即获取数据仍拿到模糊值的问题，核心是要等待后端数据填充到DOM后再执行获取逻辑，以下是几种可行的方案：

方案1：使用MutationObserver监听目标元素内容变化 #

这是最可靠的方法，直接监听存储买家信息的show-text元素的内容变更，当后端数据替换模糊值时立即触发获取逻辑。

// 模拟点击开关
document.getElementsByClassName("next-switch-children")[0].click();

// 获取目标元素
const targetElement = document.querySelector(".order-field-shipping-receiver-name .order-field-value .show-text");

// 创建MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 检查内容是否已更新（可根据实际情况调整判断条件，比如是否包含*）
    const receiverName = targetElement.textContent.trim();
    if (!receiverName.includes("*")) {
      console.log("获取到真实姓名：", receiverName);
      // 完成后停止监听
      observer.disconnect();
    }
  });
});

// 配置监听选项：监听文本内容变化
observer.observe(targetElement, {
  characterData: true,
  subtree: true // 若文本在子节点中，需开启此项
});

方案2：监听开关的class变化（你提出的思路） #

先监听开关元素的class从next-switch-off变为next-switch-on，再在状态切换后启动内容监听：

const switchElement = document.querySelector(".next-switch-children");
// 模拟点击
switchElement.click();

// 监听开关的class变化
const switchObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes" && mutation.attributeName === "class") {
      if (switchElement.classList.contains("next-switch-on")) {
        // 开关已打开，开始监听目标元素内容
        const targetElement = document.querySelector(".order-field-shipping-receiver-name .order-field-value .show-text");
        const contentObserver = new MutationObserver((mutations) => {
          const receiverName = targetElement.textContent.trim();
          if (!receiverName.includes("*")) {
            console.log("获取到真实姓名：", receiverName);
            contentObserver.disconnect();
            switchObserver.disconnect();
          }
        });
        contentObserver.observe(targetElement, { characterData: true, subtree: true });
      }
    }
  });
});

switchObserver.observe(switchElement, { attributes: true });

方案3：简易轮询（适合快速测试） #

如果不想用MutationObserver，可以定期检查目标元素的内容，直到拿到真实值：

document.getElementsByClassName("next-switch-children")[0].click();

const checkReceiverName = setInterval(() => {
  const targetElement = document.querySelector(".order-field-shipping-receiver-name .order-field-value .show-text");
  const receiverName = targetElement?.textContent.trim();
  if (receiverName && !receiverName.includes("*")) {
    console.log("获取到真实姓名：", receiverName);
    clearInterval(checkReceiverName);
  }
}, 500); // 每500ms检查一次，可根据实际加载速度调整间隔

注意事项 #

• 实际使用时，可根据页面结构调整选择器，确保能准确选中目标元素
• 判断内容是否为真实值的条件（比如是否包含*）可根据平台的模糊规则修改
• MutationObserver是浏览器原生API，兼容性好，推荐优先使用

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