纯JavaScript环境下能否通过DOM操作获取API渲染到span标签的数值供其他脚本使用？

完全可以从已渲染到页面的#return-from-apispan节点中，抓取到API接口返回的数值，供cart.js的购物车业务逻辑复用，不存在技术层面的阻碍，只要满足执行时序的基本要求即可实现。

• 读取DOM的操作执行时机，必须晚于apicall.js完成异步API请求、将返回值渲染到目标span节点的时刻，否则会读取到空值或者null。
• 目标span节点必须已经挂载到当前页面的DOM树中，不能是尚未完成解析、或是被动态移除的状态。

在cart.js中直接通过DOM选择器读取节点文本即可，附带基础容错逻辑：

// cart.js 内的读取逻辑
const targetEl = document.querySelector('#return-from-api');
// 增加容错判断，避免元素不存在时报错中断后续业务
if (targetEl) {
  // 去除文本前后的空白字符，转换为数值类型适配业务计算
  const parsedValue = Number(targetEl.textContent.trim());
  // 可直接将parsedValue传入购物车相关逻辑使用
}

• 时序问题规避：如果脚本是直接在页面头部引入且没有defer/async属性，脚本执行时DOM还没完成解析，会找不到目标节点。可以把脚本放在页面底部、或者给脚本标签加defer属性，同时保证引入顺序为apicall.js先于cart.js加载执行。
• 异步渲染适配：由于API请求是异步流程，无法靠固定引入顺序保证渲染一定早于读取完成，可以在apicall.js渲染完数值后，主动派发自定义事件通知其他脚本值已经准备就绪，避免无意义的轮询等待。
  对应apicall.js的改造代码：

  // apicall.js 拿到接口数据、完成DOM渲染后
  const spanEl = document.getElementById('return-from-api');
  spanEl.textContent = interfaceRes.returnValue;
  // 派发自定义事件，携带原始接口值传递给其他脚本
  spanEl.dispatchEvent(new CustomEvent('apiDataReady', {
    detail: { returnValue: interfaceRes.returnValue }
  }));
  

  对应cart.js的改造代码，无需等待DOM渲染完成再主动读取，直接监听事件即可拿到最准确的原始接口值：

  // cart.js 内监听接口值渲染完成事件
  document.querySelector('#return-from-api')?.addEventListener('apiDataReady', (event) => {
    const rawApiValue = event.detail.returnValue;
    // 直接将原始值传入购物车业务逻辑，比从DOM解析文本更可靠
  });
  

• 读取方式选择：优先使用textContent读取节点文本，不要用innerHTML，避免节点后续被注入HTML内容时出现读取异常。如果后续渲染逻辑会给数值加展示格式（比如货币符号、千分位分隔符、单位后缀），直接从DOM解析文本会出现类型转换失败的问题，这种场景下使用自定义事件传递原始接口值的方案可靠性更高。

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